/* ── tokens (ask 251, step 1, 2026-10-27): the measured design system, in our colours and our faces. ──
   Every value here is one read off statlocker.gg's live pages (ks-return docs/internal/teardown/reports/
   statlocker-design-system.md): their scale, their spacing, their corners, their timing. The hues are ours (the
   plum-black ground, the cream text, the green), the faces are ours (Archivo wide for headlines and figures, Source
   Serif 4 for every word). Loaded last on every page, so these win over site.css and the older redesign layer.
   A component names a token; it never writes a hex or a px of its own. */
:root{
  /* ── surfaces: one dim ground, glass-grey panels on it ── */
  --bg:#08070a;--side:#0c0a0e;--well:#0a090c;
  --panel:rgba(16,14,19,.82);--panel2:rgba(30,27,34,.85);--panel-line:var(--line2);
  --panel-grad:linear-gradient(135deg,rgba(22,20,25,.6),rgba(18,16,21,.7) 25%,rgba(28,25,32,.6) 50%,rgba(20,18,24,.7) 75%,rgba(15,13,18,.6));
  --topbar:linear-gradient(rgba(25,22,28,.92),rgba(18,16,21,.96) 60%,rgba(12,10,14,.98));
  --chip:rgba(241,239,232,.07);--dots:rgba(241,239,232,.14);
  /* ── borders, three levels (hairlines, never shadows, between panels) ── */
  --line1:rgba(255,255,255,.06);--line2:rgba(255,255,255,.10);--line3:rgba(255,255,255,.20);
  --line:var(--line1);
  /* ── text, four levels ── */
  --fg:#f1efe8;--fg2:#dcd7cf;--dim:#a89c91;--mute:#7a736c;--faint:rgba(241,239,232,.3);
  /* ── the accent: ice blue; on a player's page their shop theme replaces these three (looks.js wearTheme) ── */
  --accent:#a39c92;--accent-ink:#0d0c0a;--accent-rgb:163,156,146;   /* stone, his pick 10-29 (was sky blue #7cc8f0; bone #e6e0d4 and silver #c3c8cf on the back burner) */
  --acc:var(--accent);--acc-ink:var(--accent-ink);
  --ghost6:rgba(var(--accent-rgb),.06);--ghost12:rgba(var(--accent-rgb),.12);--ghost22:rgba(var(--accent-rgb),.22);
  --acc-soft:var(--ghost12);--acc-line:rgba(var(--accent-rgb),.35);
  --green:var(--accent);--green-ink:var(--accent-ink);--green-soft:color-mix(in srgb,var(--accent) 55%,#fff);--green-dim:color-mix(in srgb,var(--accent) 45%,#000);
  /* ── outcomes: fixed on purpose, a new accent never recolours a win ── */
  --win:#3fd57f;--win-ink:#8ff0b3;--loss:#f0605d;--loss-ink:#f0877f;--even:#f2c94c;--neutral:#7a736c;
  --good:var(--win);--bad:var(--loss);--red:var(--loss);--gold:#f2c94c;--blue:var(--accent);--sky:#8fc7ff;--violet:#b48cf2;--souls:#abffe3;--ink:#0d0f12;
  --amber:#d9a33b;--amber-soft:rgba(217,163,59,.14);--sapph:#5b8def;--sapph-soft:rgba(91,141,239,.14);
  --g-s:#8ff0b3;--g-a:#7cc8f0;--g-b:#f2c94c;--g-c:#e0a45e;--g-d:#f0605d;
  /* ── the faces (locked): Archivo wide 900 caps for headlines and figures; Source Serif 4 for every word ── */
  --wide:"Archivo","Arial Black",Impact,sans-serif;--fig:"Archivo","Arial Black",Impact,sans-serif;--stretch:125%;
  --font-body:"Source Serif 4",Georgia,serif;--body:var(--font-body);--sans:var(--font-body);--mono:var(--font-body);--display:var(--font-body);--geist:var(--font-body);
  --hand:"Caveat","Segoe Print",cursive;--brush:"Caveat Brush","Caveat","Segoe Print",cursive;
  /* ── the size scale (their nine steps, 360→1380 px) ── */
  --fs-2xs:clamp(8.5px,.3vw + 7.5px,10px);--fs-xs:clamp(10px,.4vw + 8.5px,12px);--fs-sm:clamp(11px,.4vw + 9.5px,13px);
  --fs-base:clamp(12px,.4vw + 10.5px,14px);--fs-md:clamp(13.5px,.5vw + 11.5px,16px);--fs-lg:clamp(17px,.6vw + 15px,20px);
  --fs-xl:clamp(20.5px,.7vw + 18px,24px);--fs-2xl:clamp(27px,1vw + 23px,32px);--fs-3xl:clamp(34px,1.2vw + 30px,40px);
  /* the stats tabs' older names, on the same scale */
  --fs-s:var(--fs-sm);--fs-m:var(--fs-base);--fs-l:var(--fs-md);
  --lh-head:1.2;--lh-tight:1;--lh-body:1.5;--lh-xs:1.25;--lh-s:1.3;--lh-m:1.45;--lh-l:1.5;
  --track-label:.04em;--track-caps:.08em;--track-head:.01em;
  --tr-xs:.04em;--tr-s:.04em;--tr-m:.06em;--tr-l:.08em;--tr-xl:.08em;
  --w-ui:600;--w-bold:700;--w-head:900;--fw-5:500;--fw-6:600;
  /* ── space: a 4 px unit, their seven steps ── */
  --sp-xs:clamp(2px,.2vw + 1px,4px);--sp-sm:clamp(4px,.4vw + 2.5px,8px);--sp-md:clamp(8px,.4vw + 6.5px,12px);--sp-lg:clamp(12px,.4vw + 10.5px,16px);
  --sp-xl:clamp(16px,.8vw + 13px,24px);--sp-2xl:clamp(24px,.8vw + 21px,32px);--sp-3xl:clamp(32px,1.6vw + 26px,48px);
  --gap:var(--sp-lg);--pad:var(--sp-lg);
  /* ── corners: square; a chip, a menu and a grade gem are the only exceptions ── */
  --r:0;--r2:0;--r-chip:3px;--r-menu:6px;--r-gem:7px;--r-round:50%;--r-pill:999px;
  --r-1:0;--r-2:var(--r-chip);--r-3:0;--r-4:var(--r-menu);--r-5:0;--r-6:0;
  /* ── measures ── */
  --wrap:clamp(1380px,90vw,3400px);--gut:clamp(16px,1.6vw,48px);--ice:var(--accent);--topbar-h:64px;--tabs-h:56px;--row-h:84px;--edge:4px;--focus:2px;
  /* ── elevation: a hairline on the top edge and a soft black drop; panels never cast on each other ── */
  --el-card:inset 0 1px 0 rgba(255,255,255,.03);--el-bar:0 8px 32px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.5);
  --el-hover:0 10px 30px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.06);--el-overlay:0 8px 24px rgba(0,0,0,.5);--el-tip:0 4px 20px rgba(0,0,0,.6),0 0 30px rgba(0,0,0,.4);
  --blur-card:3px;--blur-bar:8px;--blur-row:10px;--blur-tip:12px;
  /* ── motion: one curve, three lengths; the longer two only for a page's first paint ── */
  --ease:cubic-bezier(.2,0,0,1);--ease-in:cubic-bezier(.22,1,.36,1);
  --fast:150ms;--base:200ms;--slow:300ms;--enter:420ms;--tab-enter:500ms;--tip:150ms;--stagger:25ms;--lift:-2px;
  --z-sticky:100;--z-menu:2000;--z-tip:5000;
  /* ── the stats tabs' tokens (site.css's :root before the Performance tab), on the glass ── */
  --st-well:var(--panel);--st-tile:rgba(26,22,32,.85);--st-tile-hi:rgba(36,31,44,.9);--st-track:rgba(255,255,255,.08);--st-art:rgba(28,24,34,.9);--st-rule:var(--line2);--st-rule-2:var(--line3);
  --st-hover:rgba(255,255,255,.03);--st-open:rgba(255,255,255,.04);--st-open-body:rgba(255,255,255,.02);
  --st-win:var(--win);--st-loss:var(--loss);--st-loss-bar:#e23b3b;--st-blue:#5b8def;--st-sky:var(--sky);--st-violet:var(--violet);--st-sold:#9a968d;--st-even:#9a968d;
  --paper:rgba(24,21,28,.9);--paper-ink:var(--fg);--paper-dim:var(--dim);--paper-dim-2:#9a968d;--paper-label:var(--mute);--paper-track:rgba(255,255,255,.1);
  --paper-up:var(--win);--paper-dn:var(--loss);--paper-win:var(--win);--paper-win-ink:var(--win);--paper-even:var(--dim);--paper-loss:var(--loss);--paper-loss-ink:var(--loss);--paper-shadow:none;
  --lobby-me:var(--win);--lobby-mate:var(--gold);--lobby-foe:var(--sky);
  --map-bg:#0f0d12;--map-them-bg:#1a1518;--map-us-bg:#121a16;--map-veil:rgba(8,7,10,.85);--card-shadow:none;
  --t-day:600 var(--fs-lg)/1 var(--hand);--t-arrow:400 var(--fs-lg)/1 var(--brush);--t-num-b:600 var(--fs-md) var(--body);
  --tl-band-early:rgba(63,213,127,.05);--tl-band-late:rgba(240,96,93,.04);
  /* the old look's textures, gone */
  --noise:none;--chalkfx:none;--chalk:var(--fg);--chalk-accent:var(--accent);--board:var(--panel);--frame1:var(--panel);--frame2:var(--line2);
  color-scheme:dark}
@media (prefers-reduced-motion:reduce){:root{--fast:0ms;--base:0ms;--slow:0ms;--enter:0ms;--tab-enter:0ms;--tip:0ms;--stagger:0ms;--lift:0}}