/* ============================================================
   KEP VANCE — DESIGN TOKENS
   Hermès rule (§U4): monochrome foundation + exactly ONE accent.
   Accent = "signal" chartreuse, spent only on the primary action,
   focus rings, and the live-inspector readout. Never on decoration.
   Light is the default (paper); dark is a deliberate token swap.
   ============================================================ */
:root {
  /* --- neutral ramp (near-black -> near-white, warm) --- */
  --n-0:#0d0e10; --n-1:#16181b; --n-2:#22262b; --n-3:#3a3f46;
  --n-4:#5b616b; --n-5:#858c96; --n-6:#b7bcc4; --n-7:#dcded9;
  --n-8:#ebeae4; --n-9:#f6f5f1;

  /* --- semantic surfaces (light) --- */
  --paper:var(--n-9);
  --surface:#fffffe;
  --surface-2:var(--n-8);
  --ink:var(--n-0);
  --ink-muted:var(--n-4);
  --ink-faint:#676c76;            /* AA-verified 4.8:1 on paper for small caption text */
  --line:rgba(13,14,16,.10);      /* §U5 hairline 0.5-1px low alpha */
  --line-strong:rgba(13,14,16,.18);

  /* --- the ONE accent (signal) --- */
  --accent:#c8ec36;               /* chartreuse fill (CTA), 14.3:1 with ink text */
  --accent-deep:#5f7010;          /* accent as TEXT/link, AA-verified 5.0:1 on paper */
  --on-accent:#0d0e10;            /* ink sits on the accent fill */
  --ring:rgba(124,147,16,.55);    /* designed focus ring, §U1 */

  /* --- meanings before hex (§U4 semantic-first) --- */
  --ok:#12805c; --ok-soft:rgba(18,128,92,.12);
  --danger:#c0362c; --danger-soft:rgba(192,54,44,.10);
  --warn:#b45309;

  /* --- type (§U3: display + text + mono for data only) --- */
  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-text:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;

  /* modular scale, 4-6 sizes, fluid */
  --t-cap:clamp(.72rem,.70rem+.15vw,.80rem);
  --t-sm:clamp(.86rem,.83rem+.18vw,.94rem);
  --t-base:clamp(1rem,.96rem+.25vw,1.08rem);
  --t-lg:clamp(1.2rem,1.1rem+.5vw,1.45rem);
  --t-xl:clamp(1.75rem,1.4rem+1.6vw,2.6rem);
  --t-2xl:clamp(2.6rem,1.9rem+3.4vw,5rem);
  --lh-tight:1.04; --lh-head:1.12; --lh-body:1.62;
  --track-display:-0.03em;        /* §U3 negative tracking on big heads */

  /* --- spacing: 4px base, 8-step scale (§Phase4). No arbitrary values. --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(20px,5vw,64px);
  --rhythm:clamp(80px,12vh,140px);   /* ONE vertical rhythm token */
  --maxw:1180px;

  /* --- surface language: <=3 radii, ONE shadow voice, ONE border --- */
  --r-sm:8px; --r:14px; --r-lg:22px; --r-pill:999px;
  --shadow:0 1px 0 rgba(13,14,16,.04), 0 18px 40px -28px rgba(13,14,16,.30);
  --shadow-lift:0 2px 0 rgba(13,14,16,.05), 0 30px 60px -30px rgba(13,14,16,.38);

  /* --- motion canon (§U2): one token set --- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --d-micro:150ms;    /* hover/press 120-180ms */
  --d-enter:230ms;    /* enters/reveals 200-260ms */
  --d-slow:520ms;
}

[data-theme="dark"] {
  --paper:#0b0c0e;
  --surface:#111316;
  --surface-2:#16181c;
  --ink:var(--n-9);
  --ink-muted:var(--n-6);
  --ink-faint:var(--n-5);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --accent-deep:#c8ec36;          /* chartreuse passes as text on dark */
  --ring:rgba(200,236,54,.55);
  --shadow:0 1px 0 rgba(0,0,0,.5), 0 24px 50px -30px rgba(0,0,0,.8);
  --shadow-lift:0 2px 0 rgba(0,0,0,.6), 0 34px 70px -30px rgba(0,0,0,.85);
  --ok-soft:rgba(18,128,92,.20);
  --danger-soft:rgba(192,54,44,.20);
}

@media (prefers-reduced-motion:reduce){
  :root{ --d-micro:1ms; --d-enter:1ms; --d-slow:1ms; }
}