/* ============================================================================
   tokens.css — the design world. Dark-only, one register: a near-black
   briefing room where the only chromatic voices are Valorant's own side
   semantics (attack rose / defense teal) + a single gold verdict accent.
   Everything else is slate and bone. builder-1 owns this file.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Ground & surfaces (deep slate, never pure black; cool hue) --------- */
  --bg:          #0b0f17;   /* app ground */
  --surface-1:   #121926;   /* rail, top bar */
  --surface-2:   #1a2232;   /* cards (validated chart surface) */
  --surface-3:   #232d40;   /* inset / hover / raised-within-card */
  --surface-sunken: #0e131d;/* wells, code, review queue */

  /* --- Hairlines --------------------------------------------------------- */
  --border:        #26303f; /* default hairline */
  --border-strong: #35435a; /* emphasized divider / focus ring base */
  --border-faint:  #1c2431;

  /* --- Ink (bone → muted → faint) ---------------------------------------- */
  --ink:       #e9edf5;  /* primary bone text */
  --ink-muted: #98a4b9;  /* secondary */
  --ink-faint: #63708a;  /* tertiary / captions */
  --ink-ondark:#0b0f17;  /* text on gold / on colored fills */

  /* --- Valorant side semantics (functional; convention-locked) ----------- */
  --attack:      #ff4655; /* attack side (rose/red) */
  --attack-ink:  #ff8791; /* attack text on dark (raised contrast) */
  --attack-soft: rgba(255, 70, 85, 0.13);
  --defense:     #16d6a6; /* defense side (teal/green) */
  --defense-ink: #4ce3bf; /* defense text on dark */
  --defense-soft:rgba(22, 214, 166, 0.12);

  /* --- Verdict accent (gold; RESERVED for directive-tier moments) -------- */
  --gold:      #f2c866;
  --gold-ink:  #f6d585;
  --gold-soft: rgba(242, 200, 102, 0.12);
  --gold-line: rgba(242, 200, 102, 0.34);

  /* --- Player identity (categorical; validated CVD-safe on --surface-2) --- */
  --player-a: #6d80dd;  /* Casual / Carter — indigo */
  --player-b: #bf8146;  /* Kolerocks / Kole — amber */
  --player-a-soft: rgba(109, 128, 221, 0.14);
  --player-b-soft: rgba(191, 129, 70, 0.14);

  /* --- Tier language colors (rate confidence) ---------------------------- */
  --tier-directive:  var(--gold);       /* ≤6pp — prescribe */
  --tier-suggestive: var(--ink);        /* ≤12pp — suggest */
  --tier-descriptive:var(--ink-faint);  /* >12pp — describe, no imperative */

  /* --- Chart ink --------------------------------------------------------- */
  --grid:      #202a3a;
  --axis:      #33405480;

  /* --- Shadows (hue-shifted cool, low & soft — briefing-room quiet) ------ */
  --shadow-1: 0 1px 2px rgba(4, 8, 16, 0.5);
  --shadow-2: 0 2px 6px rgba(4, 8, 16, 0.45), 0 8px 24px rgba(4, 8, 16, 0.30);
  --shadow-3: 0 6px 16px rgba(4, 8, 16, 0.5), 0 18px 48px rgba(4, 8, 16, 0.38);

  /* --- Spacing (4px base) ------------------------------------------------ */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- Radii (concentric rule: inner = outer − padding) ------------------ */
  --r-xs:  4px;
  --r-1:   7px;   /* inner elements */
  --r-2:  11px;   /* cards */
  --r-3:  15px;   /* outer wrappers */
  --r-pill: 999px;

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Type scale (fixed; dark data-dense app) --------------------------- */
  --fs-hero:  2.25rem;   /* 36 */
  --fs-h1:    1.625rem;  /* 26 */
  --fs-h2:    1.1875rem; /* 19 */
  --fs-h3:    1rem;      /* 16 */
  --fs-body:  0.9375rem; /* 15 */
  --fs-sm:    0.8125rem; /* 13 */
  --fs-xs:    0.6875rem; /* 11 — labels/eyebrows */
  --fs-data:  0.875rem;  /* 14 — tabular data cells */

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.55;

  --fw-reg: 400;
  --fw-med: 500;
  --fw-semi:600;
  --fw-bold:700;

  --ls-eyebrow: 0.14em;
  --ls-tight: -0.01em;

  /* --- Layout ------------------------------------------------------------ */
  --rail-w: 232px;
  --topbar-h: 56px;
  --content-max: 1120px;

  /* --- Motion ------------------------------------------------------------ */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);

  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}