/* ============================================================================
   ledger/tokens.css: the one token sheet (STYLEGUIDE-r2 §1, "Ledger"). The only file in public/ that may hold a
   colour literal (SPEC-CHECKLIST T-04); every other sheet and script refers to these names.
   Loaded after style.css (and the other old sheets) and before ledger/kit.css, so the names the old sheets share
   (--bg, --panel, --accent-ink, …) resolve to the spec values. The retired names (--accent-graph, --accent-edge,
   --accent-dim, --accent-tint, *-tint/*-edge, --accent-rim, --attention-ink, --tip-bg/-fg, --r-pill, --line-soft,
   --chrome) were deleted from style.css in WP10 (T-03); nothing may bring them back.
   ========================================================================= */

/* §1a colour roles (18, closed), dark. Each role does one job. */
:root {
  --bg: #0B111A;          /* page */
  --panel: #141C2B;       /* section surface */
  --panel2: #1B2540;      /* inset, current-nav fill; never a hover fill on a bar row */
  --line: #253254;        /* dividers and section borders only */
  --line-firm: #3A4A6A;   /* rule under table headers and totals */
  --line-ctl: #607194;    /* every control border; the hover/focus bar on a row's resting surface */
  --text: #E0E6F0;        /* body, headings, figures */
  --dim: #8B9BB5;         /* labels, axis ticks, secondary text, folio */
  --muted: #7E90B0;       /* placeholder, disabled, zero values */
  --accent: #F5C542;      /* gold fills: primary button, finding disc */
  --accent-ink: #F5C542;  /* every thin gold mark: nav bar, open-row bar, focus ring, chart emphasis */
  /* Recorded exception (Evan, 2026-11-03; twin snakes 2026-11-04): the background snakes (ledger/bg-snake.js) paint
     their bodies in --accent-ink at alpha 0.70 -> 0.12 and each live-event dot as a soft --accent-ink pulse (core
     0.40-0.66 dark / 0.47-0.78 light, halo 0.11-0.21 / 0.12-0.25). Wide screens: both page margins, outside the content column. Narrower: the whole
     viewport, under every content layer. Game pages only, with an off switch. Decoration by explicit pick, not a
     gold signal; none of it counts toward the per-screen gold budget. */
  --on-accent: #0B111A;   /* text on a gold fill */
  --attention: #FF8C42;   /* the warning glyph only */
  --good: #4ADE80;        /* outcome glyph + word */
  --bad: #F87171;         /* danger button, error glyph + word */
  --teal: #56B6C2;        /* chart series 2, never a state */
  --shadow: 0 18px 60px rgba(0,0,0,.55);  /* overlays only */
  --backdrop: rgba(4,7,12,.74);           /* modal backdrop */
}

/* §1a light column and §7: designed, never inverted. */
:root[data-theme="light"] {
  --bg: #F6F7FA;
  --panel: #FFFFFF;
  --panel2: #F0F3F8;
  --line: #D5DCE8;
  --line-firm: #B0BCC8;
  --line-ctl: #7F8CA3;
  --text: #131A26;
  --dim: #55607A;
  --muted: #646D80;
  --accent: #F5C542;
  --accent-ink: #A67A00;
  --on-accent: #0B111A;
  --attention: #C2410C;
  --good: #15803D;
  --bad: #B3261E;
  --teal: #0E7490;
  --shadow: 0 16px 44px rgba(19,26,38,.18);
  --backdrop: rgba(19,26,38,.5);
}

/* Breakdown bars on Players and Sessions (Evan 2026-11-03): outside the 18 roles, chart-only, each one a bar fill and
   the mark beside its label. Each ratio is the lower of the two against the theme's chart grounds (panel, bg); a brand colour under
   3:1 there gets a theme-safe variant, noted on its line (ratios: test/players-breakdown.test.ts recomputes them).
   --plat-*: the brand colour per platform family (simple-icons 16.35.0 hex where the package has the mark; the
   brands' own blue/green/red for Windows, Xbox and Switch, which draw a dot).
   --build-age-*: the bar blue (--dim) stepping down by build age, newest-but-one first; the newest build is
   --accent-ink (the chart's emphasis), the folded "Other" bar the last step. Desaturated like the role greys. */
:root {
  --plat-windows: #0078D4;      /* Microsoft blue, 3.77 */
  --plat-apple: #A2AAAD;        /* Apple #000000 is 1.11 on dark: silver variant 7.22 */
  --plat-linux: #FCC624;        /* 10.76 */
  --plat-steamdeck: #1A9FFF;    /* 6.05 */
  --plat-playstation: #0070D1;  /* 3.44 */
  --plat-xbox: #107C10;         /* 3.18 */
  --plat-switch: #E60012;       /* 3.55 */
  --plat-android: #3DDC84;      /* 9.56 */
  --plat-web: var(--dim);       /* no brand: the plain bar */
  --plat-other: var(--muted);   /* unknown and unmapped platforms */
  --build-age-1: #8B9BB5;       /* = --dim, 6.06 */
  --build-age-2: #7A8BA9;       /* 4.95 */
  --build-age-3: #6B7C9D;       /* 4.06 */
  --build-age-4: #617292;       /* 3.52 */
  --build-age-5: #5B6C8C;       /* Other, 3.22 */
}
:root[data-theme="light"] {
  --plat-windows: #0078D4;      /* 4.23 */
  --plat-apple: #000000;        /* 19.60 */
  --plat-linux: #8F6A00;        /* Linux #FCC624 is 1.48 on white: dark variant 4.63 */
  --plat-steamdeck: #0A75D1;    /* Steam Deck #1A9FFF is 2.63 on white: dark variant 4.38 */
  --plat-playstation: #0070D1;  /* 4.63 */
  --plat-xbox: #107C10;         /* 5.01 */
  --plat-switch: #E60012;       /* 4.48 */
  --plat-android: #1E8A4F;      /* Android #3DDC84 is 1.67 on white: dark variant 4.08 */
  --build-age-1: #55607A;       /* = --dim, 5.87 */
  --build-age-2: #65708C;       /* 4.61 */
  --build-age-3: #74809A;       /* 3.70 */
  --build-age-4: #7C88A1;       /* 3.33 */
  --build-age-5: #828EA6;       /* Other, 3.08 */
}

/* Player paths graph on World (ledger/flowgraph.js, approved round-2 design, Evan 2026-11-03): outside the 18 roles,
   graph only, for the jobs no role does. The graph's other colours are roles: --panel, --text, --dim, --line,
   --line-firm, --line-ctl (detour links), --accent-ink (main path), --good (entry), --bad (losses), --teal, --focus.
   --flow-card / --flow-card-off: main-path and detour card fills; --flow-band / --flow-lost-band: the detour and lost
   lane grounds; --flow-hop: main-path links; --flow-text-off: detour names; --flow-hover: a hovered link;
   --flow-main-line: a main-path card's border (dark: --accent-ink at 55 % on --flow-card; light: full --accent-ink,
   3.6:1 on white); --flow-track: the median bar's empty track (light: lighter than --line so the gold bar on it keeps
   3.2:1); --flow-detour-line: a detour card's border (light: --line-ctl, 3.1:1 on --flow-band). The lane names in the gutter use --dim (review U5: the old gutter token was 4.2-4.5:1).
   --flow-tag-load / --flow-tag-boss / --flow-tag-handoff: the border of a card its game tagged load/save, boss or hand-off
   (zone tags, 2026-11-04), always beside the category's glyph. Each is 3:1 or more on both card fills in its theme
   (test/zonetags-render.test.ts measures it). Boss is a burnt orange kept apart from the gold accent, --attention and
   --bad (OKLab distance 0.10 or more from each); load/save and hand-off are kept apart from --good and --teal.
   The Player paths map (Pivot Trace, v1.73.0) reads --bad as an ending or a death and nothing else; its wisp, ribbon and
   trunk greys are mixes of --text over --panel at 3:1 or more in both themes (kit.css, .gg-pivot). */
:root {
  --flow-card: #18223A;
  --flow-card-off: #151D2D;
  --flow-band: #172033;
  --flow-lost-band: #161E2F;
  --flow-hop: #9AA8C0;
  --flow-text-off: #A9B4C6;
  --flow-hover: #C9D3E3;
  --flow-main-line: #927C3E;
  --flow-track: var(--line);
  --flow-detour-line: var(--line-firm);
  --flow-tag-load: #5FB84A;
  --flow-tag-boss: #D65C0A;
  --flow-tag-handoff: #2BC3B0;
}
:root[data-theme="light"] {
  --flow-card: #FFFFFF;
  --flow-card-off: #F8F9FB;
  --flow-band: #F3F5F9;
  --flow-lost-band: #FAFAFC;
  --flow-hop: #6B7891;
  --flow-text-off: #424D61;
  --flow-hover: #131A26;
  --flow-main-line: var(--accent-ink);
  --flow-track: #E6EAF1;
  --flow-detour-line: var(--line-ctl);   /* 3.1:1 on --flow-band (--line-firm was 1.8:1, review R7) */
  --flow-tag-load: #3F8C1A;
  --flow-tag-boss: #DE6800;
  --flow-tag-handoff: #0A8A80;
}

/* Everything below is theme-free: names built from the roles, or sizes. */
:root {
  /* derived jobs (var() of a role, never a new colour) */
  --mark: var(--accent-ink);       /* the 2px bar: current nav item, open row */
  --focus: var(--accent-ink);      /* the one focus ring */
  --meter: var(--text);            /* meter fill and switch on-track */
  --chart-1: var(--text);          /* series 1 */
  --chart-2: var(--teal);          /* series 2 */
  --chart-3: var(--dim);           /* series 3, dashed */
  --chart-ref: var(--dim);         /* references and marks, dashed */
  --chart-bar: var(--dim);         /* plain bars */

  /* §1b type: Space Grotesk 400/500/600; mono for ids, keys and code only */
  --font: "Space Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-code: var(--font-mono);
  --fs-value: 32px;   --lh-value: 38px;    /* 500, tabular: stat tile figure */
  --fs-title: 22px;   --lh-title: 28px;    /* 600: the one h1 */
  --fs-section: 16px; --lh-section: 22px;  /* 600: h2, drawer and modal titles */
  --fs-body: 13px;    --lh-body: 20px;     /* 400, tabular: sentences, labels, buttons */
  --fs-cell: 12px;    --lh-cell: 16px;     /* 400, tabular: table cells, ids, versions */
  --fs-caption: 11px; --lh-caption: 14px;  /* 400, tabular: ticks, timestamps, folio */
  --w-body: 400; --w-label: 500; --w-head: 600;
  --nums-body: tabular-nums;

  /* §1c space: every padding, margin and gap is one of these, 0 or auto */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* §1c shape: 4 controls and sections, 8 modal and drawer, 50% discs and avatar */
  --r-ctl: 4px;
  --r-modal: 8px;
  --r-disc: 50%;

  /* §1c size */
  --h-ctl: 32px; --h-ctl-sm: 28px;          /* controls, small controls */
  --row-h: 36px; --row-h-list: 32px; --th-h: 32px;
  --hit-min: 24px;                          /* icon-only hit area */
  --icon: 16px; --icon-lg: 20px;            /* 20 only inside a 32px icon button */
  --mark-w: 2px;                            /* the bar */
  --meter-h: 6px;
  --trunc-w: 320px;                         /* long cells ellipsize here */
  --topbar-h: 64px;
  --drawer-w: 475px; --drawer-min: 400px;   /* columns 9-12 at 1440, 400 floor */
  --modal-w: 480px;
  --z-popover: 30; --z-drawer: 40; --z-modal: 50;

  /* §1c motion: 120 ms opacity, 200 ms transform; nothing else moves */
  --t-fade: 120ms;
  --t-move: 200ms;

  /* §1c focus: one ring, 2px accent-ink, 2px offset, :focus-visible only */
  --focus-w: 2px;
  --focus-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fade: 0ms; --t-move: 0ms; }
}