/* ============================================================
   tokens.css — THE design token layer for the whole site.
   Implements docs/DESIGN-SYSTEM.md §2-§5, §12.1.

   Load this FIRST on every page, before main.css and redesign.css.
   Both of them consume these variables; a page that loads main.css
   without tokens.css will silently drop every var() that resolves
   here (colours fall back to initial, spacing collapses).

   Defines only custom properties — it paints nothing on its own, so
   adding it to a page can never change that page's appearance.

   Headline rule (§1): the chrome accent is --accent (#5B8DEF) and is
   DISTINCT from Human race blue (--race-H #4488FF). The four race
   colors are DATA ONLY, never the app's button/focus/link/selected
   color.
   ============================================================ */

:root {
  /* ── §2.1 Surfaces & elevation (dark, lighter = higher) ─────── */
  --bg-deep:   #12131f;
  --bg:        #1a1d2e;
  --surface:   #212538;
  --surface-2: #2a2f45;
  --surface-3: #323750;
  --surface-4: #3b4060;

  /* ── §2.2 Borders & dividers ───────────────────────────────── */
  --border:    rgba(255,255,255,0.10);
  --border-2:  rgba(255,255,255,0.18);
  --border-3:  rgba(255,255,255,0.26);
  --wash:      rgba(255,255,255,0.05);  /* faint translucent-white surface wash */

  /* ── §2.3 Text ─────────────────────────────────────────────── */
  --text:           #e8eaf0;
  --text-muted:     #9ca3b8;
  --text-dim:       #6b7290;
  --text-on-accent: #ffffff;
  --text-on-gold:   #2a2107;

  /* ── §2.4 Chrome accent (the app's own color, NOT Human) ──── */
  --accent:        #5B8DEF;
  --accent-strong: #6E9CF5;
  --accent-deep:   #3F6FD0;
  --accent-soft:   rgba(91,141,239,0.14);
  --accent-ring:   rgba(91,141,239,0.55);

  /* ── §2.5 Gold (achievement / "your build" / premium) ──────── */
  --gold:      #FFD24D;
  --gold-deep: #E0A800;
  --gold-ink:  #2a2107;
  --gold-soft: rgba(240,178,50,0.12);
  --gold-edge: rgba(240,178,50,0.45);

  /* ── §2.6 Resource accents (data only) ─────────────────────── */
  --lumber:   #44DD88;
  --gold-res: var(--gold);

  /* ── §2.7 Race-as-data palette (base values) ───────────────── */
  --race-H: #4488FF;  /* Human, kept exactly as in-game blue (now != chrome) */
  --race-O: #FF4444;  /* Orc       */
  --race-E: #44DD88;  /* Night Elf */
  --race-U: #AA66FF;  /* Undead    */
  /* Undead-derived edge/wash, available at :root for the welcome-gate's
     "analyzer" wayfinding path (§6.4) where no [data-race] is set. */
  --race-U-edge: #7848a8;
  --race-soft-u: rgba(170,102,255,0.16);

  /* ── §2.8 Grade scale (letter + color; gradeColor() lockstep) ─ */
  --grade-a:    #6EE7A8;
  --grade-b:    #8FD0FF;
  --grade-c:    #F0C674;
  --grade-d:    #F0A86A;
  --grade-f:    #F08A8A;
  --grade-none: #9ca3b8;

  /* ── §2.9 Tier scale (matches the real app) ────────────────── */
  --tier-1: #FFFFFF;
  --tier-2: #21A5E3;
  --tier-3: #FFFF33;

  /* ── §2.9b Dominance brackets (data only) ──────────────────────
     Warcraft-Logs parse palette, applied to the 0-100 dominance score
     (DominanceBar.bracketFor is the single lockstep mapping):
     0-24 grey · 25-49 green · 50-74 blue · 75-94 purple ·
     95-98 orange · 99 pink · 100 gold */
  --dom-grey:   #9d9d9d;
  --dom-green:  #1eff00;
  --dom-blue:   #0070dd;
  --dom-purple: #a335ee;
  --dom-orange: #ff8000;
  --dom-pink:   #e268a8;
  --dom-gold:   #e5cc80;

  /* ── §2.10 Semantic states (outcome / validity) ────────────── */
  --ok:    #6EE7A8;  --ok-soft:   rgba(60,200,140,0.12);  --ok-edge:   rgba(80,200,140,0.40);
  --warn:  #F0C674;  --warn-soft: rgba(240,178,50,0.12);  --warn-edge: rgba(240,178,50,0.40);
  --bad:   #F08A8A;  --bad-soft:  rgba(220,80,80,0.12);    --bad-edge:  rgba(220,80,80,0.40);
  --info:  var(--accent);
  --privacy: #7FE0A8;
  --privacy-soft: rgba(60,200,140,0.08);
  --privacy-edge: rgba(80,200,140,0.35);
  --privacy-hi:   #9af0c0;

  /* ── §3 Typography ─────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Consolas', 'Cascadia Mono', monospace;

  --fs-display: 2.1rem;   /* gate logo / hero number */
  --fs-h1:      1.8rem;   /* page lead headline */
  --fs-h2:      1.4rem;   /* section / card-title / best-fit title */
  --fs-h3:      1.15rem;  /* drawer title, step title */
  --fs-lg:      1.05rem;  /* emphasized body, large button */
  --fs-base:    1.0rem;   /* body */
  --fs-sm:      0.92rem;  /* secondary body, card body copy */
  --fs-label:   0.85rem;  /* chips, small buttons, meta labels */
  --fs-min:     0.8rem;   /* HARD FLOOR: abbrs, counts, eyebrows, mono tags */

  /* ── §4.1 Spacing scale (4px base) ─────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 22px; --sp-6: 30px; --sp-7: 40px; --sp-8: 56px;

  /* ── Page shell (§8) ────────────────────────────────────────
     ONE max-width and ONE gutter for every top-level container:
     the nav inner, the hero strip, the drop bar, <main>, and the
     footer. If these ever disagree the page visibly steps in and
     out at each band. The gutter is deliberately NOT on the
     --sp-* scale (22 / 30 straddle it), so it gets its own token
     rather than an abuse of the spacing scale. */
  --page-max:    1800px;
  --page-gutter: 24px;
  --appbar-h:    52px;   /* sticky #site-nav height — sticky offsets key off this */

  /* ── §4.2 Radius ───────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ── §4.3 Minimum interactive / icon sizes (≥36px) ─────────── */
  --ico-sm:  36px;
  --ico-md:  44px;
  --ico-lg:  56px;
  --ico-xl:  64px;
  --hit-min: 44px;

  /* ── §5.1 Shadow ───────────────────────────────────────────── */
  --shadow-1: 0 4px 14px rgba(0,0,0,0.30);
  --shadow-2: 0 8px 26px rgba(0,0,0,0.40);
  --shadow-3: 0 10px 40px rgba(0,0,0,0.45);
  --shadow-drawer: -12px 0 40px rgba(0,0,0,0.50);

  /* ── §5.2 Motion ───────────────────────────────────────────── */
  --dur-fast: 0.12s;
  --dur:      0.18s;
  --ease:     cubic-bezier(0.2, 0.6, 0.2, 1);

  /* ── §12.1 Build Order palette (faithful to the viewer's main.css --bo-*) ──
     The BO surface is its own near-black navy - darker than --bg-deep - so a
     BO panel reads as "a viewer instrument embedded in the page". */
  --bo-bg:          #0F1923;  /* BO panel backdrop - deliberately darker than --bg-deep        */
  --bo-card-bg:     #1A2332;  /* hero card / summary card / upgrade-bar base                   */
  --bo-row-hover:   #1C2836;  /* action-row hover                                              */
  --bo-header-bg:   #141D29;  /* column header / sticky ACTION·SUPPLY bar                       */
  --bo-border:      rgba(48,54,61,0.4);  /* row divider (hairline, full-width - never an edge stripe) */
  --bo-border-solid:#21262D;  /* icon tile border                                             */
  --bo-supply-bg:   rgba(0,0,0,0.55);    /* supply pill / cost-strip fill                       */

  --bo-gold:        #FFD700;  /* gold cost / "GOLD" worker tag  (data only)                   */
  --bo-lumber:      #44DD88;  /* lumber cost / "LUMBER" worker tag (data only; == --lumber)    */
  --bo-food:        #58A6FF;  /* food / supply-building accent                                 */
  --bo-tavern:      #9B6DFF;  /* shop / tavern frame                                          */
  --bo-accent:      #F0B232;  /* hero/level highlight, group-count, parchment-gold BO accent   */

  --bo-text:        #C9D1D9;  /* BO body text                                                 */
  --bo-text-muted:  #8B949E;  /* BO secondary                                                 */
  --bo-text-dim:    #6E7681;  /* BO labels / counts                                           */

  --bo-tier1:       #FFFFFF;  /* T1 white  (== --tier-1)                                       */
  --bo-tier2:       #21A5E3;  /* T2 cyan   (== --tier-2)                                       */
  --bo-tier3:       #FFFF33;  /* T3 yellow (== --tier-3)                                       */

  /* completion / upkeep semantics (kept inside the BO so they match the app exactly) */
  --bo-supply-ok:   #E8F0FF;  /* upkeep none (≤50 food)   */
  --bo-supply-low:  #FF8C00;  /* low upkeep  (51-80)      */
  --bo-supply-high: #FF4444;  /* high upkeep (>80)        */
  --bo-complete:    #4ECDC4;  /* "+N supply" / building-complete teal */

  --bo-mono:        var(--mono);  /* costs, supply, counts - same mono as the rest of the proto */
}

/* ── §2.7 Per-race resolved groups (selected via [data-race]) ──── */
[data-race="H"]{ --race:#4488FF; --race-ink:#A8C8FF; --race-bg:#1e2848; --race-head:#283c6a;
                 --race-bd:#3860b0; --race-bd-hi:#5888dd; --race-glow:rgba(80,130,220,0.22);
                 --race-soft:rgba(68,136,255,0.14); }
[data-race="O"]{ --race:#FF4444; --race-ink:#FF9A8A; --race-bg:#2c1e18; --race-head:#5a2820;
                 --race-bd:#904030; --race-bd-hi:#bb5540; --race-glow:rgba(200,80,40,0.22);
                 --race-soft:rgba(255,68,68,0.14); }
[data-race="E"]{ --race:#44DD88; --race-ink:#8DEEB6; --race-bg:#162820; --race-head:#1e4830;
                 --race-bd:#286848; --race-bd-hi:#389068; --race-glow:rgba(60,200,140,0.22);
                 --race-soft:rgba(68,221,136,0.14); }
[data-race="U"]{ --race:#AA66FF; --race-ink:#CDA6FF; --race-bg:#221a38; --race-head:#382858;
                 --race-bd:#583880; --race-bd-hi:#7848a8; --race-glow:rgba(160,80,240,0.22);
                 --race-soft:rgba(170,102,255,0.14); }