/* ============================================================
   METIX, Brand Design Tokens · v3 (Klein Blue), 2026/Q2
   Single source of truth for color, type, radius, motion.
   v3 replaces the earlier teal + serif drafts.
   Breaking changes require Founder sign-off (see Governance).
   ============================================================ */

:root{
  /* ---------- KLEIN, primary (International Klein Blue) ---------- */
  --klein:        #002FA7;   /* IKB · primary brand, heroes, CTAs. White text only. */
  --klein-900:    #001E80;   /* pressed / hover on Klein surfaces */
  --klein-deep:   #001460;   /* the void · footer, hero floor, deepest depth */
  --klein-link:   #1A54D4;   /* links and secondary actions on Paper; also "confirmed" success */
  --klein-300:    #5E8FE8;   /* decorative mid, chart fill */
  --klein-tint:   #D7E2FB;   /* tag / pill / tinted surface */
  --klein-soft:   #EBF0FD;   /* subtle wash */

  /* ---------- GOLD, accent (Monogold, the spark) ---------- */
  --gold:         #C9A84C;   /* the spark · accent. Decorative/large/icon. decorative/large/icon only. */
  --gold-2:       #E6C877;   /* emphasis text on Klein (passes AAA) */
  --gold-soft:    #F8F1DC;   /* quote ground / hint background */

  /* ---------- PAPER & INK ---------- */
  --paper:        #F5F6FA;   /* default page surface · cool off-white (not pure white) */
  --paper-2:      #E4E8F4;   /* recessed surface / dividers */
  --paper-3:      #FFFFFF;   /* card · brightest surface */
  --ink:          #11141C;   /* primary text · never pure black */
  --ink-2:        #2A2E3B;   /* body */
  --ink-3:        #5A5D72;   /* tertiary / meta */
  --ink-4:        #A4A7B5;   /* disabled / placeholder */

  /* ---------- NEUTRAL LINE ---------- */
  --line:         #C7CCDB;   /* hairline rules (cool grey, modernist) */
  --mist:         #ECEFF7;   /* neutral light surface */

  /* ---------- SEMANTIC (no green, by design) ---------- */
  --ok:           #1A54D4;   /* success / confirmed · brand blue, not green */
  --error:        #C0392B;   /* error / destructive, sparingly */
  --warning:      #C9A84C;   /* warning · shares gold */

  /* ---------- RADIUS ---------- */
  --r: 2px;                  /* the only radius on the system */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Satoshi', ui-sans-serif, sans-serif;              /* DISPLAY + wordmark grotesque (Fontshare), 700-900 */
  --font-body:    'Hanken Grotesk', ui-sans-serif, -apple-system, 'PingFang SC', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---------- TYPE SCALE (size / line / tracking) ---------- */
  --t-display-xl: 96px;  --lh-display-xl: 92px;  --ls-display-xl: -0.045em; /* Satoshi 900 */
  --t-display-lg: 64px;  --lh-display-lg: 61px;  --ls-display-lg: -0.035em; /* Satoshi 700 */
  --t-display:    44px;  --lh-display:    44px;  --ls-display:    -0.03em;   /* Satoshi 700 */
  --t-h1:         32px;  --lh-h1:         38px;  --ls-h1:         -0.02em;   /* Hanken 700 */
  --t-h2:         22px;  --lh-h2:         28px;  --ls-h2:         -0.01em;   /* Hanken 600 */
  --t-lead:       19px;  --lh-lead:       29px;  --ls-lead:       0;         /* Hanken 400 */
  --t-body:       16px;  --lh-body:       26px;  --ls-body:       0;         /* Hanken 400 */
  --t-caption:    13px;  --lh-caption:    18px;  --ls-caption:    0;         /* Hanken 500 */
  --t-eyebrow:    11px;  --lh-eyebrow:    16px;  --ls-eyebrow:    0.18em;    /* JetBrains Mono, UPPERCASE */

  /* ---------- MOTION ---------- */
  --settle: 200ms;           /* the gold diamond settles into the centre, the only logo motion */
  --ease: cubic-bezier(.2,.6,.2,1);

  /* ---------- SURFACE BUDGET (guideline) ----------
     Klein 45 (bold doses) · Paper 35 · Ink 13 · Gold 5. Two gold things = one is wrong. */
}

/* Selection + focus are part of the identity */
::selection{ background:var(--klein); color:var(--gold-2); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:var(--r); }

/* CONTRAST RULES (WCAG, computed):
   white on Klein 10.7:1 AAA · ink on Paper 16:1 AAA · gold-2 on Klein 7.8:1 AAA
   gold on Klein 2.6:1 FAIL (decorative only) · ink on Klein 1.9:1 FAIL (white text only on Klein). */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}