/* ============================================================================
   WHATPULSE TRIBUNAL — design tokens
   "The Tribunal": competitive-leaderboard identity. Dark-first ink surface,
   IBM Plex Mono for every figure (the scoreboard's spine), a single signal-orange
   accent reserved for the per-metric leader crown. Jewel-toned categorical hues,
   CVD-validated (ΔE ≥ 32) and constant across themes.
   ========================================================================== */

:root {
  /* — type — */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Mono', monospace;

  /* fluid type scale */
  --t-xs:   clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --t-sm:   clamp(0.78rem, 0.74rem + 0.20vw, 0.88rem);
  --t-base: clamp(0.90rem, 0.84rem + 0.30vw, 1.02rem);
  --t-md:   clamp(1.05rem, 0.96rem + 0.45vw, 1.28rem);
  --t-lg:   clamp(1.35rem, 1.18rem + 0.85vw, 1.95rem);
  --t-xl:   clamp(1.85rem, 1.45rem + 2.0vw, 3.3rem);
  --t-hero: clamp(2.6rem, 1.8rem + 3.6vw, 5.2rem);

  /* — spacing — */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* — shape — */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --hairline: 1px;

  /* categorical — constant across themes (validated CVD-safe) */
  --slot-0: #12A59F;   /* teal   */
  --slot-1: #6E5BE6;   /* violet */
  --slot-2: #D63D7A;   /* rose   */
  --accent: #FF7A1A;   /* signal orange — leader crown only */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* — DARK (default) — */
:root,
[data-theme='dark'] {
  color-scheme: dark;
  --bg:        #0E1116;
  --bg-grad-a: #131A22;
  --bg-grad-b: #0B0E12;
  --panel:     #151A21;
  --panel-2:   #1B222B;
  --panel-3:   #222B36;
  --border:    #232B36;
  --border-2:  #2E3744;
  --ink:       #E8ECF2;
  --ink-2:     #9CA6B4;
  --ink-3:     #636E7D;
  --ink-faint: #3A424D;

  --accent-ink: #FFB07A;          /* orange as text — AA on dark */
  --accent-soft: rgba(255, 122, 26, 0.14);
  --accent-ring: rgba(255, 122, 26, 0.35);

  --slot-soft-0: rgba(18, 165, 159, 0.16);
  --slot-soft-1: rgba(110, 91, 230, 0.16);
  --slot-soft-2: rgba(214, 61, 122, 0.16);

  --grid-line: rgba(255, 255, 255, 0.035);
  --shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px -18px rgba(0,0,0,0.8);
  --track: rgba(255, 255, 255, 0.06);
}

/* — LIGHT (cool parchment; not the cliché warm cream) — */
[data-theme='light'] {
  color-scheme: light;
  --bg:        #ECEEF2;
  --bg-grad-a: #F4F6F9;
  --bg-grad-b: #E4E7EC;
  --panel:     #FFFFFF;
  --panel-2:   #F6F7FA;
  --panel-3:   #EEF0F4;
  --border:    #DEE2EA;
  --border-2:  #CFD5DF;
  --ink:       #141A22;
  --ink-2:     #4E5666;
  --ink-3:     #7A8493;
  --ink-faint: #B6BDC9;

  --accent-ink: #C95900;          /* orange as text — AA on light */
  --accent-soft: rgba(255, 122, 26, 0.14);
  --accent-ring: rgba(255, 122, 26, 0.30);

  --slot-soft-0: rgba(18, 165, 159, 0.14);
  --slot-soft-1: rgba(110, 91, 230, 0.14);
  --slot-soft-2: rgba(214, 61, 122, 0.14);

  --grid-line: rgba(0, 0, 0, 0.045);
  --shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 10px 28px -20px rgba(20,26,34,0.30);
  --track: rgba(20, 26, 34, 0.07);
}