/* =====================================================================
   Buvette FC design tokens
   Layer 1: primitives (raw palette, never used directly by components)
   Layer 2: semantic tokens (what components consume), per theme
   ===================================================================== */

:root {
  /* ---------- Primitives: neutrals (cool, faintly green-tinted slate) ---------- */
  --n-0:   #fbfcfc;
  --n-50:  #f4f6f6;
  --n-100: #eaeeee;
  --n-200: #d9dfdf;
  --n-300: #bcc5c5;
  --n-400: #8e9a9a;
  --n-500: #677373;
  --n-600: #4d5858;
  --n-700: #363f3f;
  --n-800: #252c2c;
  --n-850: #1c2222;
  --n-900: #151a1a;
  --n-950: #0e1212;

  /* ---------- Primitives: brand green (pitch) ---------- */
  --g-50:  #ecfdf3;
  --g-100: #d1fadf;
  --g-200: #a6f4c5;
  --g-300: #6ce9a6;
  --g-400: #32d583;
  --g-500: #12b76a;
  --g-600: #039855;
  --g-700: #027a48;
  --g-800: #05603a;
  --g-900: #054f31;

  /* ---------- Primitives: supporting hues ---------- */
  --amber-100: #fef0c7; --amber-300: #fec84b; --amber-400: #fdb022; --amber-600: #dc6803; --amber-700: #b54708; --amber-900: #4e1d09;
  --red-100:   #fee4e2; --red-300:   #fda29b; --red-400:   #f97066; --red-600:   #d92d20; --red-700:   #b42318; --red-900:   #55160c;
  --blue-100:  #d1e9ff; --blue-300:  #84caff; --blue-400:  #53b1fd; --blue-600:  #1570ef; --blue-700:  #175cd3; --blue-900:  #102a56;

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Barlow Condensed", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale, ratio ~1.2 on a 14px base (dense dashboard) */
  --text-xs:   12px;  --leading-xs:   16px;
  --text-sm:   13px;  --leading-sm:   20px;
  --text-base: 14px;  --leading-base: 20px;
  --text-md:   16px;  --leading-md:   24px;
  --text-lg:   20px;  --leading-lg:   28px;
  --text-xl:   24px;  --leading-xl:   32px;
  --text-2xl:  32px;  --leading-2xl:  36px;  /* display font: KPIs */
  --text-3xl:  56px;  --leading-3xl:  56px;  /* display font: scoreline */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-caps: 0.06em;

  /* ---------- Spacing (4px base, 8pt rhythm) ---------- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- Radii (medium, friendly) — children always smaller than parents ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------- Control sizing: buttons, inputs and selects share heights ---------- */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;

  /* ---------- Layout ---------- */
  --tabbar-height: 58px;   /* the floating tab bar: item height plus its padding and border */
  --tabbar-item: 48px;
  --topbar-height: 64px;
  --content-max: 1280px;
  --page-pad: var(--space-8);
  --gap: var(--space-6);   /* between related blocks (cards in a grid, a group) */
  --section-gap: var(--space-8);   /* between unrelated sections of a page: always more than --gap */
  --card-pad: var(--space-6);
  --card-radius: var(--radius-lg);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layers ---------- */
  --z-sticky: 10;
  --z-drawer: 40;
  --z-overlay: 50;
  --z-toast: 60;

  /* ---------- Pitch: subtle, a quiet ground with faint lines; the players carry the colour ---------- */
  --pitch-1: var(--g-800);   /* the grass, in mown stripes: the brand greens in both themes */
  --pitch-2: color-mix(in srgb, var(--g-800) 70%, var(--g-700));
  --pitch-bg: var(--pitch-1);
  --pitch-line: rgba(255, 255, 255, 0.3);
  --pitch-ink: var(--n-0);
  --pitch-ink-soft: var(--g-100);
  --pitch-chip: rgba(4, 22, 14, 0.72);   /* a player's name on the grass */
  --pitch-spot: rgba(255, 255, 255, 0.12);
  --pitch-spot-ring: rgba(255, 255, 255, 0.4);
  --pitch-danger: #ff9b9b;
  --pitch-danger-bg: #ff9b9b;
  --pitch-danger-ink: #151a1a;
  /* ---------- Isometric illustrations (facilities, campus, stadium): toy-model colours ---------- */
  --iso-sky: #dbe7f1;
  --iso-ink: #1d2440;
  --iso-shade-1: #0b1020;
  --iso-grass: #2e9a6a;
  --iso-soil: #1e6e4e;
  --iso-wall: #f6f1e7;
  --iso-white: #ffffff;
  --iso-stone: #d6d0c4;
  --iso-blue: #2f5bd6;
  --iso-glass: #fde4d8;
  --iso-glow: #ffe08a;
  --iso-screen: #8fd0ff;
  --iso-roof: #ef7b2d;
  --iso-gold: #f5c542;
  --iso-red: #e5484d;
  --iso-wood: #b97a44;
  --iso-dark: #2b3242;
  --iso-asphalt: #5a6372;
  --iso-sign: #2b3242;
  --iso-bush: #3fae6f;
  --iso-tree: #2f9a5b;
  --iso-shadow: rgba(29, 36, 64, 0.14);
  --iso-beam: rgba(255, 224, 138, 0.35);
  /* Role-fit markers on the pitch (the formation map, the XI preview, the lineup's fit badges) */
  --fit-best: var(--amber-300);
  --fit-best-ink: #151a1a;
  --fit-good: #1f2624;
  --fit-ok: #66706e;
  --fit-weak: rgba(16, 24, 22, 0.1);
  --fit-ink: #ffffff;
  --fit-ink-weak: #4d5755;
}

/* =====================================================================
   Semantic tokens — LIGHT theme (default)
   ===================================================================== */
:root {
  color-scheme: light;

  --bg-canvas: var(--n-50);
  --bg-surface: var(--n-0);
  --bg-raised: var(--n-0);
  --bg-subtle: var(--n-100);
  --bg-hover: rgba(14, 18, 18, 0.045);
  --bg-pressed: rgba(14, 18, 18, 0.08);
  --bg-inset: var(--n-100);
  --bg-input: var(--n-0);
  --bg-topbar: rgba(244, 246, 246, 0.8);   /* see-through, blurred: content passes under it softly */
  --topbar-blur: saturate(1.8) blur(20px);
  --bg-tabbar: rgba(251, 252, 252, 0.86);
  --tabbar-active-bg: rgba(16, 24, 22, 0.08);   /* the open tab's pill */
  --bg-overlay: rgba(14, 18, 18, 0.48);
  --spot-dim: rgba(14, 18, 18, 0.28);
  --card-sheen: rgba(2, 122, 72, 0.035);   /* a card's top catches a little light */   /* the first hour's spotlight: the page around the control */
  --bg-inverse: var(--n-900);

  --border-subtle: var(--n-100);
  --border-default: var(--n-200);
  --pot-tint: 10%;   /* how strongly a potential pill fills: AA for its number in light */
  --border-strong: var(--n-300);
  --border-highlight: transparent;

  --text-primary: var(--n-900);
  --text-secondary: var(--n-600);
  --text-tertiary: var(--n-500);
  --text-disabled: var(--n-400);
  --text-inverse: var(--n-0);

  --accent: var(--g-700);
  --accent-hover: var(--g-800);
  --accent-text: var(--g-700);
  --accent-subtle: var(--g-50);
  --accent-subtle-border: var(--g-200);
  --on-accent: #ffffff;
  --on-solid: var(--n-0);   /* text and knobs on solid status colours (count badges, switches), same in both themes */

  --success-text: var(--g-700);   --success-bg: var(--g-50);    --success-border: var(--g-200);  --success-solid: var(--g-600);
  --warning-text: var(--amber-700); --warning-bg: #fffaeb;      --warning-border: var(--amber-100); --warning-solid: var(--amber-400);
  --danger-text: var(--red-700);  --danger-bg: #fef3f2;         --danger-border: var(--red-100); --danger-solid: var(--red-600);
  --info-text: var(--blue-700);   --info-bg: #eff8ff;           --info-border: var(--blue-100);  --info-solid: var(--blue-600);

  --home: var(--g-600);
  --away: var(--blue-600);

  /* Stadium illustration. Seats take the club colour (set on the drawing as --club-1/--club-2)
     and mix it towards --stadium-tint for each higher tier: daylight in light, a night match in dark. */
  --stadium-ground: var(--n-100);
  --stadium-ground-dot: var(--n-300);
  --stadium-glow: rgba(255, 255, 255, 0.9);
  --stadium-tint: var(--n-0);
  --stadium-seat-row: rgba(255, 255, 255, 0.16);
  --stadium-concourse: var(--n-800);
  --stadium-roof: rgba(255, 255, 255, 0.62);
  --stadium-roof-rib: var(--n-300);
  --stadium-structure: var(--n-500);
  --stadium-building: var(--n-0);
  --stadium-lamp: #fff3c4;
  --stadium-flood: rgba(255, 255, 255, 0.14);
  --stadium-led-mix: var(--n-0);
  --stadium-led-glow: 0.35;
  /* Weather atmosphere on match pages */
  --wx-rain: rgba(60, 90, 130, 0.38);
  --wx-snow: rgba(150, 170, 200, 0.9);
  --wx-sun: rgba(255, 228, 160, 0.30);
  --wx-fog: rgba(205, 210, 214, 0.75);
  --wx-star: rgba(120, 110, 170, 0.5);
  --wx-tint-rain: rgba(70, 110, 160, 0.10);
  --wx-tint-sun: rgba(255, 190, 70, 0.14);
  --wx-tint-cold: rgba(150, 200, 240, 0.16);
  --wx-tint-fog: rgba(180, 186, 190, 0.22);
  --wx-tint-mild: rgba(120, 100, 170, 0.10);
  /* the weather scene inside the match card: the sky and what falls or shines in it */
  --wxs-sky-rain: rgba(70, 105, 150, 0.24);
  --wxs-sky-cold: rgba(140, 190, 235, 0.22);
  --wxs-sky-sun: rgba(255, 214, 120, 0.14);
  --wxs-sky-fog: rgba(150, 160, 168, 0.30);
  --wxs-sky-mild: rgba(85, 70, 150, 0.24);
  --wxs-rain: rgba(55, 90, 135, 0.75);
  --wxs-splash: rgba(60, 95, 140, 0.45);
  --wxs-snow: rgba(150, 175, 210, 0.95);
  --wxs-cap: rgba(255, 255, 255, 0.95);
  --wxs-cap-edge: rgba(150, 175, 210, 0.45);
  --wxs-sun: rgba(255, 226, 150, 0.45);
  --wxs-mist: rgba(150, 160, 168, 0.5);
  --wxs-moon: rgba(250, 236, 190, 1);
  --wxs-moon-glow: rgba(250, 230, 170, 0.45);
  --wxs-star: rgba(95, 80, 160, 0.8);
  --wxs-cloud: rgba(70, 85, 110, 0.32);
  --wxs-cloud-snow: rgba(150, 165, 185, 0.35);
  --wxs-flash: rgba(255, 255, 255, 0.55);
  --wxs-sheen: rgba(120, 160, 210, 0.22);
  --wxs-frost: rgba(225, 240, 255, 0.85);
  --wxs-sun-core: rgba(255, 252, 238, 1);
  --wxs-halo: rgba(255, 248, 225, 0.6);
  --wxs-mote: rgba(255, 245, 210, 0.9);
  /* End-of-season moment: a dark stage in both themes */
  --moment-bg: radial-gradient(120% 80% at 50% 0%, #22302a 0%, #0f1513 55%, #0a0d0c 100%);
  --moment-text: #f2f5f4;
  --moment-muted: rgba(242, 245, 244, 0.72);
  --moment-line: rgba(255, 255, 255, 0.10);
  --moment-panel: rgba(10, 13, 12, 0.55);   /* stat tiles on the dark stage */
  --moment-foot: linear-gradient(180deg, rgba(10, 13, 12, 0) 0%, rgba(10, 13, 12, 0.94) 38%);   /* behind the finale's fixed button */
  /* European Cup nights: a navy stage with stars, floodlight glow and gold (same in both themes) */
  --cup-bg: #0b1640;
  --cup-glow: radial-gradient(120% 90% at 50% -10%, rgba(88, 126, 255, 0.50), transparent 62%);
  --cup-stars: radial-gradient(1.2px 1.2px at 8% 18%, rgba(255, 255, 255, 0.8), transparent 70%), radial-gradient(1px 1px at 22% 64%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(1.4px 1.4px at 37% 12%, rgba(255, 255, 255, 0.7), transparent 70%), radial-gradient(1px 1px at 52% 80%, rgba(255, 255, 255, 0.5), transparent 70%), radial-gradient(1.3px 1.3px at 66% 26%, rgba(255, 255, 255, 0.75), transparent 70%), radial-gradient(1px 1px at 81% 58%, rgba(255, 255, 255, 0.55), transparent 70%), radial-gradient(1.2px 1.2px at 92% 14%, rgba(255, 255, 255, 0.7), transparent 70%), radial-gradient(1px 1px at 74% 88%, rgba(255, 255, 255, 0.45), transparent 70%);
  --cup-text: #f4f6ff;
  --cup-muted: rgba(244, 246, 255, 0.76);
  --cup-line: rgba(255, 255, 255, 0.16);
  --cup-gold: var(--trophy-hi);
  --cup-panel: rgba(255, 255, 255, 0.06);   /* tiles and the bowls on the cup stage */
  --cup-mine: rgba(255, 224, 138, 0.14);   /* your tie in the draw */
  --cup-foot: linear-gradient(180deg, rgba(11, 22, 64, 0) 0%, rgba(11, 22, 64, 0.96) 40%);   /* behind the draw's fixed buttons */
  --draw-ball: radial-gradient(circle at 34% 30%, #ffffff 0%, #e6eaf5 32%, #a9b3cc 78%, #7e89a6 100%);
  --draw-bowl: radial-gradient(90% 70% at 50% 100%, rgba(140, 170, 255, 0.22), rgba(255, 255, 255, 0.04) 70%);
  /* Stories (League page): the ring of an unseen reel and the slide's text over club colours (same in both themes) */
  --story-ring: conic-gradient(from 210deg, #fcd34d, #f43f5e, #a855f7, #6366f1, #fcd34d);
  --story-text: #ffffff;
  --story-muted: rgba(255, 255, 255, 0.82);
  --story-like: #ff6b8a;   /* the like heart on a story (always on the dark story stage) */
  --story-line: rgba(255, 255, 255, 0.18);
  --story-panel: rgba(0, 0, 0, 0.28);
  --story-shade: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0.62) 100%);
  --story-bar: rgba(255, 255, 255, 0.35);
  --moment-glow: rgba(255, 205, 90, 0.35);
  --moment-ribbon: #3b82f6;
  --trophy-hi: #ffe08a;
  --trophy-lo: #d6931c;
  --trophy-base: #4a3417;
  --trophy-shine: rgba(255, 255, 255, 0.55);
  --ring-1: var(--g-400);   /* the light running round the card that leads to Play */
  --ring-2: #5eead4;
  --ring-3: var(--trophy-hi);
  /* gradients: fills that read as light passing over them (bars, toggles, primary actions), same in both themes */
  --grad-accent: linear-gradient(90deg, var(--g-600), var(--g-400));
  --grad-info: linear-gradient(90deg, var(--blue-600), var(--blue-400));
  --grad-warning: linear-gradient(90deg, var(--amber-600), var(--amber-300));
  --grad-danger: linear-gradient(90deg, var(--red-600), var(--red-400));
  --grad-gold: linear-gradient(90deg, var(--trophy-lo), var(--trophy-hi));
  --grad-button: linear-gradient(180deg, var(--g-700), var(--g-800));   /* white text passes AA on both ends */
  --gold-hi: var(--trophy-hi);   /* museum cups by division won: gold, silver, bronze (same in both themes) */
  --gold-lo: var(--trophy-lo);
  --silver-hi: #f1f3f5;
  --silver-lo: #9aa3ad;
  --bronze-hi: #f0b98a;
  --bronze-lo: #a8612c;
  --stadium-sign: var(--blue-600);   /* car park signs, same in both themes */
  --stadium-sign-text: var(--n-0);
  --crowd-1: var(--n-0);
  --crowd-2: var(--amber-300);
  --crowd-3: var(--red-300);
  --crowd-4: var(--g-100);

  --focus-ring: 0 0 0 3px rgba(3, 152, 85, 0.28);

  --shadow-xs: 0 1px 2px rgba(16, 24, 24, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 24, 0.08), 0 1px 2px rgba(16, 24, 24, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 24, 0.10), 0 2px 4px -2px rgba(16, 24, 24, 0.05);
  --shadow-lg: 0 16px 32px -8px rgba(16, 24, 24, 0.16), 0 4px 8px -4px rgba(16, 24, 24, 0.06);
  --shadow-xl: 0 24px 56px -12px rgba(16, 24, 24, 0.28);
}

/* =====================================================================
   Semantic tokens — DARK theme
   Elevation = lighter surfaces; borders are translucent white; accent desaturated/lightened.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas: var(--n-950);
    --bg-surface: var(--n-900);
    --bg-raised: var(--n-850);
    --bg-subtle: var(--n-850);
    --bg-hover: rgba(255, 255, 255, 0.05);
    --bg-pressed: rgba(255, 255, 255, 0.09);
    --bg-inset: rgba(0, 0, 0, 0.28);
    --bg-input: var(--n-950);
    --bg-topbar: rgba(14, 18, 18, 0.78);
    --bg-tabbar: rgba(28, 34, 34, 0.84);
    --tabbar-active-bg: rgba(255, 255, 255, 0.12);
    --bg-overlay: rgba(0, 0, 0, 0.62);
    --spot-dim: rgba(0, 0, 0, 0.45);
    --card-sheen: rgba(255, 255, 255, 0.035);
    --grad-button: linear-gradient(180deg, var(--g-300), var(--g-500));
    --bg-inverse: var(--n-100);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --pot-tint: 20%;   /* how strongly a potential pill fills: AA for its number in dark */
    --border-strong: rgba(255, 255, 255, 0.18);
    --border-highlight: rgba(255, 255, 255, 0.04);
    --text-primary: #e8eded;
    --text-secondary: #a6b0b0;
    --text-tertiary: #84908f;
    --text-disabled: #5b6666;
    --text-inverse: var(--n-950);
    --accent: var(--g-400);
    --accent-hover: var(--g-300);
    --accent-text: var(--g-400);
    --accent-subtle: rgba(50, 213, 131, 0.10);
    --accent-subtle-border: rgba(50, 213, 131, 0.28);
    --on-accent: #052e1c;
    --success-text: var(--g-400);   --success-bg: rgba(50, 213, 131, 0.10);  --success-border: rgba(50, 213, 131, 0.26);  --success-solid: var(--g-500);
    --warning-text: var(--amber-300); --warning-bg: rgba(253, 176, 34, 0.10); --warning-border: rgba(253, 176, 34, 0.26); --warning-solid: var(--amber-400);
    --danger-text: var(--red-300);  --danger-bg: rgba(249, 112, 102, 0.10);  --danger-border: rgba(249, 112, 102, 0.28); --danger-solid: #e5484d;
    --info-text: var(--blue-300);   --info-bg: rgba(83, 177, 253, 0.10);     --info-border: rgba(83, 177, 253, 0.26);   --info-solid: var(--blue-400);
    --home: var(--g-400);
    --away: var(--blue-400);
    --stadium-ground: #090c0c;
    --stadium-ground-dot: var(--n-800);
    --stadium-glow: rgba(120, 255, 190, 0.1);
    --stadium-tint: #0b0f0f;
    --stadium-seat-row: rgba(255, 255, 255, 0.07);
    --stadium-concourse: #050707;
    --stadium-roof: rgba(255, 255, 255, 0.08);
    --stadium-roof-rib: rgba(255, 255, 255, 0.14);
    --stadium-structure: #5d6969;
    --stadium-building: var(--n-800);
    --stadium-lamp: #fff6d5;
    --stadium-flood: rgba(255, 255, 255, 0.2);
    --stadium-led-mix: #d9ffe9;
    --stadium-led-glow: 0.9;
    --wx-rain: rgba(175, 200, 235, 0.30);
    --wx-snow: rgba(255, 255, 255, 0.85);
    --wx-sun: rgba(255, 222, 160, 0.12);
    --wx-fog: rgba(170, 180, 185, 0.26);
    --wx-star: rgba(255, 255, 255, 0.85);
    --wx-tint-rain: rgba(90, 130, 190, 0.12);
    --wx-tint-sun: rgba(255, 180, 60, 0.10);
    --wx-tint-cold: rgba(150, 200, 255, 0.10);
    --wx-tint-fog: rgba(160, 170, 175, 0.12);
    --wx-tint-mild: rgba(110, 90, 190, 0.16);
    --wxs-sky-rain: rgba(80, 120, 185, 0.22);
    --wxs-sky-cold: rgba(150, 200, 255, 0.16);
    --wxs-sky-sun: rgba(255, 205, 120, 0.09);
    --wxs-sky-fog: rgba(160, 170, 178, 0.16);
    --wxs-sky-mild: rgba(110, 90, 200, 0.24);
    --wxs-rain: rgba(185, 210, 245, 0.65);
    --wxs-splash: rgba(180, 205, 240, 0.4);
    --wxs-snow: rgba(255, 255, 255, 0.9);
    --wxs-cap: rgba(235, 242, 252, 0.9);
    --wxs-cap-edge: rgba(150, 190, 240, 0.35);
    --wxs-sun: rgba(255, 220, 150, 0.3);
    --wxs-mist: rgba(170, 180, 188, 0.42);
    --wxs-moon: rgba(250, 240, 210, 1);
    --wxs-moon-glow: rgba(250, 235, 190, 0.3);
    --wxs-star: rgba(255, 255, 255, 0.9);
  --wxs-cloud: rgba(10, 14, 24, 0.55);
  --wxs-cloud-snow: rgba(120, 135, 160, 0.3);
  --wxs-flash: rgba(220, 230, 255, 0.28);
  --wxs-sheen: rgba(150, 190, 240, 0.12);
  --wxs-frost: rgba(200, 225, 255, 0.28);
  --wxs-sun-core: rgba(255, 248, 226, 0.9);
  --wxs-halo: rgba(255, 245, 215, 0.34);
  --wxs-mote: rgba(255, 245, 215, 0.8);
    --crowd-1: var(--n-300);
    --crowd-2: var(--amber-300);
    --crowd-3: var(--red-300);
    --crowd-4: var(--blue-300);
    --focus-ring: 0 0 0 3px rgba(50, 213, 131, 0.32);
    --shadow-xs: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 18px 40px -10px rgba(0, 0, 0, 0.65);
    --shadow-xl: 0 28px 64px -12px rgba(0, 0, 0, 0.75);
    --pitch-1: var(--g-900);
    --pitch-2: color-mix(in srgb, var(--g-900) 55%, var(--g-800));
    --pitch-line: rgba(255, 255, 255, 0.22);
    --pitch-spot: rgba(255, 255, 255, 0.1);
    --pitch-spot-ring: rgba(255, 255, 255, 0.32);
    --pitch-danger: #ff9b9b;
    --pitch-danger-bg: #ff9b9b;
    --pitch-danger-ink: #151a1a;
    --iso-sky: #1a2333;
    --iso-wall: #e9e2d4;
    --iso-glass: #f2d3c6;
    --iso-shadow: rgba(0, 0, 0, 0.35);
    --iso-beam: rgba(255, 224, 138, 0.22);
    --fit-good: #f5f7f7;
    --fit-ok: rgba(245, 247, 247, 0.6);
    --fit-weak: rgba(245, 247, 247, 0.12);
    --fit-ink: #151a1a;
    --fit-ink-weak: rgba(255, 255, 255, 0.75);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: var(--n-950);
  --bg-surface: var(--n-900);
  --bg-raised: var(--n-850);
  --bg-subtle: var(--n-850);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-pressed: rgba(255, 255, 255, 0.09);
  --bg-inset: rgba(0, 0, 0, 0.28);
  --bg-input: var(--n-950);
  --bg-topbar: rgba(14, 18, 18, 0.78);
  --bg-tabbar: rgba(28, 34, 34, 0.84);
  --tabbar-active-bg: rgba(255, 255, 255, 0.12);
  --bg-overlay: rgba(0, 0, 0, 0.62);
  --spot-dim: rgba(0, 0, 0, 0.45);
  --card-sheen: rgba(255, 255, 255, 0.035);
  --grad-button: linear-gradient(180deg, var(--g-300), var(--g-500));
  --bg-inverse: var(--n-100);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --pot-tint: 20%;   /* how strongly a potential pill fills: AA for its number in dark */
  --border-strong: rgba(255, 255, 255, 0.18);
  --border-highlight: rgba(255, 255, 255, 0.04);
  --text-primary: #e8eded;
  --text-secondary: #a6b0b0;
  --text-tertiary: #84908f;
  --text-disabled: #5b6666;
  --text-inverse: var(--n-950);
  --accent: var(--g-400);
  --accent-hover: var(--g-300);
  --accent-text: var(--g-400);
  --accent-subtle: rgba(50, 213, 131, 0.10);
  --accent-subtle-border: rgba(50, 213, 131, 0.28);
  --on-accent: #052e1c;
  --success-text: var(--g-400);   --success-bg: rgba(50, 213, 131, 0.10);  --success-border: rgba(50, 213, 131, 0.26);  --success-solid: var(--g-500);
  --warning-text: var(--amber-300); --warning-bg: rgba(253, 176, 34, 0.10); --warning-border: rgba(253, 176, 34, 0.26); --warning-solid: var(--amber-400);
  --danger-text: var(--red-300);  --danger-bg: rgba(249, 112, 102, 0.10);  --danger-border: rgba(249, 112, 102, 0.28); --danger-solid: #e5484d;
  --info-text: var(--blue-300);   --info-bg: rgba(83, 177, 253, 0.10);     --info-border: rgba(83, 177, 253, 0.26);   --info-solid: var(--blue-400);
  --home: var(--g-400);
  --away: var(--blue-400);
  --focus-ring: 0 0 0 3px rgba(50, 213, 131, 0.32);
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 40px -10px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 28px 64px -12px rgba(0, 0, 0, 0.75);
  --stadium-ground: #090c0c;
  --stadium-ground-dot: var(--n-800);
  --stadium-glow: rgba(120, 255, 190, 0.1);
  --stadium-tint: #0b0f0f;
  --stadium-seat-row: rgba(255, 255, 255, 0.07);
  --stadium-concourse: #050707;
  --stadium-roof: rgba(255, 255, 255, 0.08);
  --stadium-roof-rib: rgba(255, 255, 255, 0.14);
  --stadium-structure: #5d6969;
  --stadium-building: var(--n-800);
  --stadium-lamp: #fff6d5;
  --stadium-flood: rgba(255, 255, 255, 0.2);
  --stadium-led-mix: #d9ffe9;
  --stadium-led-glow: 0.9;
  --wx-rain: rgba(175, 200, 235, 0.30);
  --wx-snow: rgba(255, 255, 255, 0.85);
  --wx-sun: rgba(255, 222, 160, 0.12);
  --wx-fog: rgba(170, 180, 185, 0.26);
  --wx-star: rgba(255, 255, 255, 0.85);
  --wx-tint-rain: rgba(90, 130, 190, 0.12);
  --wx-tint-sun: rgba(255, 180, 60, 0.10);
  --wx-tint-cold: rgba(150, 200, 255, 0.10);
  --wx-tint-fog: rgba(160, 170, 175, 0.12);
  --wx-tint-mild: rgba(110, 90, 190, 0.16);
  --wxs-sky-rain: rgba(80, 120, 185, 0.22);
  --wxs-sky-cold: rgba(150, 200, 255, 0.16);
  --wxs-sky-sun: rgba(255, 205, 120, 0.09);
  --wxs-sky-fog: rgba(160, 170, 178, 0.16);
  --wxs-sky-mild: rgba(110, 90, 200, 0.24);
  --wxs-rain: rgba(185, 210, 245, 0.65);
  --wxs-splash: rgba(180, 205, 240, 0.4);
  --wxs-snow: rgba(255, 255, 255, 0.9);
  --wxs-cap: rgba(235, 242, 252, 0.9);
  --wxs-cap-edge: rgba(150, 190, 240, 0.35);
  --wxs-sun: rgba(255, 220, 150, 0.3);
  --wxs-mist: rgba(170, 180, 188, 0.42);
  --wxs-moon: rgba(250, 240, 210, 1);
  --wxs-moon-glow: rgba(250, 235, 190, 0.3);
  --wxs-star: rgba(255, 255, 255, 0.9);
  --wxs-cloud: rgba(10, 14, 24, 0.55);
  --wxs-cloud-snow: rgba(120, 135, 160, 0.3);
  --wxs-flash: rgba(220, 230, 255, 0.28);
  --wxs-sheen: rgba(150, 190, 240, 0.12);
  --wxs-frost: rgba(200, 225, 255, 0.28);
  --wxs-sun-core: rgba(255, 248, 226, 0.9);
  --wxs-halo: rgba(255, 245, 215, 0.34);
  --wxs-mote: rgba(255, 245, 215, 0.8);
  --crowd-1: var(--n-300);
  --crowd-2: var(--amber-300);
  --crowd-3: var(--red-300);
  --crowd-4: var(--blue-300);
  --pitch-1: var(--g-900);
  --pitch-2: color-mix(in srgb, var(--g-900) 55%, var(--g-800));
  --pitch-line: rgba(255, 255, 255, 0.22);
  --pitch-spot: rgba(255, 255, 255, 0.1);
  --pitch-spot-ring: rgba(255, 255, 255, 0.32);
  --pitch-danger: #ff9b9b;
  --pitch-danger-bg: #ff9b9b;
  --pitch-danger-ink: #151a1a;
  --iso-sky: #1a2333;
  --iso-wall: #e9e2d4;
  --iso-glass: #f2d3c6;
  --iso-shadow: rgba(0, 0, 0, 0.35);
  --iso-beam: rgba(255, 224, 138, 0.22);
  --fit-good: #f5f7f7;
  --fit-ok: rgba(245, 247, 247, 0.6);
  --fit-weak: rgba(245, 247, 247, 0.12);
  --fit-ink: #151a1a;
  --fit-ink-weak: rgba(255, 255, 255, 0.75);
}

/* Responsive token overrides */
@media (max-width: 1023px) {
  :root { --page-pad: var(--space-6); }
}
@media (max-width: 639px) {
  :root { --page-pad: var(--space-2); --gap: var(--space-3); --section-gap: var(--space-6); --card-pad: var(--space-4); --card-radius: var(--radius-md); --topbar-height: 56px; }   /* phones: tight gutters, so the cards get the width */
}
/* Touch devices: controls grow to a 44px minimum target */
@media (pointer: coarse) {
  :root { --control-md: 44px; --control-sm: 36px; }
}