/* ═══════════════════════════════════════════════════════════════
   bskil DESIGN SYSTEM — Neumorphism + Skeuomorphism (v2.1)
   Tokens only. Values carried over from the original site;
   additions are marked (+) and exist for contrast or reuse.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --ground:      #EBEBF0;
  --surface:     #F0F0F5;
  --surface-hi:  #F8F8FC;
  --surface-lo:  #E4E4EA;
  --card:        #F0F0F5;
  --white:       #FFFFFF;
  --dark:        #18181E;
  --dark2:       #1E1E26;

  /* Ink */
  --ink:         #1C1C1E;
  --ink2:        #3A3A3C;
  --muted:       #636366;   /* 5.0:1 on ground — body-size secondary text, labels */
  --faint:       #AEAEB2;   /* decorative only (rules, disabled) — never for text */
  --hairline:    rgba(0,0,0,0.07);
  --hairline2:   rgba(0,0,0,0.12);
  --on-dark:     rgba(255,255,255,0.62);   /* (+) body copy on dark, 6.9:1 */
  --on-dark-2:   rgba(255,255,255,0.50);   /* (+) captions on dark, 5.1:1 */

  /* Persona colours — base for fills, -dark for gradients, -ink for text (+) */
  --pm:          #0A84FF;  --pm-dark: #0060CC;  --pm-ink: #0060CC;  --pm-glow: rgba(10,132,255,0.22);
  --po:          #BF5AF2;  --po-dark: #9B30D4;  --po-ink: #9B30D4;  --po-glow: rgba(191,90,242,0.22);
  --sm:          #30D158;  --sm-dark: #1FA83A;  --sm-ink: #15802A;  --sm-glow: rgba(48,209,88,0.22);
  --pg:          #FF9F0A;  --pg-dark: #CC7A00;  --pg-ink: #9A5A00;  --pg-glow: rgba(255,159,10,0.22);
  --sm-deep:     #127324;  /* (+) end stop for readable green buttons */
  --pg-deep:     #8F5300;  /* (+) end stop for readable orange buttons */

  /* Neumorphic shadows — the core system */
  --neu:
    6px 6px 14px rgba(0,0,0,0.12),
    -4px -4px 10px rgba(255,255,255,0.82);
  --neu-sm:
    4px 4px 10px rgba(0,0,0,0.10),
    -3px -3px 8px rgba(255,255,255,0.80);
  --neu-inset:
    inset 3px 3px 8px rgba(0,0,0,0.10),
    inset -2px -2px 6px rgba(255,255,255,0.75);
  --neu-pressed:
    inset 4px 4px 10px rgba(0,0,0,0.13),
    inset -2px -2px 6px rgba(255,255,255,0.70);
  --neu-hover:
    10px 14px 28px rgba(0,0,0,0.15),
    -5px -5px 14px rgba(255,255,255,0.88);

  /* Skeuomorphic — glass + metal */
  --glass:            rgba(240,240,245,0.82);
  --glass-dark:       rgba(24,24,30,0.82);
  --metal-shine:      linear-gradient(145deg,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0) 50%,rgba(0,0,0,0.04) 100%);
  --btn-gloss:        0 1px 0 rgba(255,255,255,0.45) inset;
  --card-bevel:
    0 1px 0 rgba(255,255,255,0.70) inset,
    0 -1px 0 rgba(0,0,0,0.07) inset;
  --metal-frame:      linear-gradient(145deg,#d0d0d8,#b8b8c4,#c8c8d4,#a8a8b8);
  --metal-face:       linear-gradient(155deg,#eaeaf0 0%,#d4d4dc 40%,#e4e4ea 60%,#ccccd6 100%);

  /* Radii */
  --r-xs:   8px;
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill:999px;

  /* Type — Inter is loaded by the page so Windows and Mac match */
  --font: 'Inter',-apple-system,'SF Pro Display','SF Pro Text','Helvetica Neue',Arial,sans-serif;
  --mono: 'SF Mono','Cascadia Code','Fira Code',Menlo,Consolas,monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22,0.61,0.36,1);
  --t-fast: 0.15s;
  --t-base: 0.22s;

  /* Layout */
  --wrap: 1080px;
  --wrap-sm: 760px;
}