/*
 * statty design tokens — the single source of truth for the statty visual identity.
 *
 * Values were extracted from a frequency audit of the existing UI (Jul 2026),
 * so they describe the design as shipped. See services/vue/DESIGN.md for the
 * full style guide, usage rules, and adoption strategy.
 *
 * Colour is in two tiers (DESIGN.md §9.2), so that a theme can be added by
 * re-pointing roles rather than editing values:
 *
 *   --st-palette-*  raw values, theme-independent. Referenced only by the
 *                   semantic tier below — never by a component.
 *   --st-color-*    semantic roles, pointed at a palette entry. This is what
 *                   components use, and the only tier a theme redefines.
 *
 * Everything else (type, spacing, shape, motion) is a single tier.
 *
 * Rules:
 *  - New or modified styles MUST reference the semantic tokens (var(--st-*))
 *    instead of hardcoding hex/px values.
 *  - Existing styles are migrated opportunistically — when you touch a rule,
 *    swap its raw values for the matching token.
 *  - Never introduce a new color/size inline; add a token here first: the raw
 *    value to the palette, the role to the semantic tier.
 *
 * Note: CSS custom properties cannot be used inside @media queries — the
 * canonical breakpoints live in DESIGN.md and must stay in sync manually.
 * Static pages under public/ load a published copy (`public/tokens.css`);
 * tests/designTokenTiers.test.js pins the two files identical.
 */

:root {
	color-scheme: light;

	/* ================================================================== */
	/* TIER 1 — PALETTE                                                    */
	/* ================================================================== */
	/* Raw values, identical in every theme. ONLY the semantic tier below
	   may reference these — components must never use --st-palette-*.
	   Adding a theme means re-pointing tier 2, never editing tier 1. */

	/* Navy — the statty brand hue. 200–500 are the dark-theme rungs
	   (link text, button fill); 850–950 are navy-tinted surfaces. Light
	   mode does not use them; they exist so dark does not have to fall
	   back to the Bootstrap greys and lose the brand. */
	--st-palette-navy-200: #a3c4e8;
	--st-palette-navy-300: #7eaddc;
	--st-palette-navy-400: #3d73b8;
	--st-palette-navy-500: #2a5a9e;
	--st-palette-navy-700: #11427c;
	--st-palette-navy-800: #032d5f;
	--st-palette-navy-850: #141c28;
	--st-palette-navy-900: #0c121c;
	--st-palette-navy-950: #080c14;

	/* Other brand hues */
	--st-palette-indigo-700: #1a2b6b;
	--st-palette-indigo-400: #4a6cf7; /* upcoming-chip label; brighter than indigo-700 */
	--st-palette-blue-500: #1675e5;
	--st-palette-terracotta-500: #d36135;

	/* Status hues */
	--st-palette-green-400: #6fa88a; /* live text on a dark surface */
	--st-palette-green-600: #45825b;
	--st-palette-green-700: #2d6a4f;
	--st-palette-red-300: #f07a86;   /* danger text on a dark surface */
	--st-palette-red-400: #f66b6b;   /* relegation-playoffs rank */
	--st-palette-red-500: #dc3545;
	--st-palette-red-700: #d0021b;   /* relegation rank, form-chip loss */
	--st-palette-amber-300: #ffc107; /* form-chip draw (bootstrap warning) */
	--st-palette-amber-400: #ffa43d;
	--st-palette-amber-800: #b26a00;
	--st-palette-terracotta-400: #e07a52; /* accent text on a dark surface */
	--st-palette-slate-300: #8aa4c0; /* slate labels on a dark surface */
	--st-palette-slate-500: #547092;

	/* Neutral ramp, ordered light → dark. Extra named steps (60/75/80/200/
	   400/450/500/700/800) are the exact literals already in the shipped UI
	   — they are NOT snaps of a neighbour. Dark collapses near-twins onto
	   the same ramp steps (see :root[data-theme="dark"]) without deleting
	   the light-theme names. */
	--st-palette-grey-0: #ffffff;
	--st-palette-grey-50: #f8f9fc;   /* statty's slightly-blue near-white */
	--st-palette-grey-60: #f9f8ff;   /* lilac near-white — inactive panels */
	--st-palette-grey-75: #f9f9f9;   /* plain near-white fills */
	--st-palette-grey-80: #eef1f6;   /* cool section/table rules */
	--st-palette-grey-100: #f3f3f3;
	--st-palette-grey-200: #e9ecef;  /* dim chip / neutral fill */
	--st-palette-grey-300: #dee2e6;
	--st-palette-grey-400: #adb5bd;  /* hint text, empty-state icons */
	--st-palette-grey-450: #a8a4a4;  /* warm muted — inactive tab labels */
	--st-palette-grey-500: #868e96;  /* quiet captions */
	--st-palette-grey-600: #6c757d;
	--st-palette-grey-700: #495057;  /* secondary labels */
	--st-palette-grey-750: #333333;  /* historical body-text neutral; near-twin
	                                    of #343a40 (grey-800) — candidate to
	                                    fold in once dark mode is authored */
	--st-palette-grey-800: #343a40;
	--st-palette-grey-900: #212529;
	--st-palette-grey-1000: #000000;

	/* Soft tints — 50 is a wash on white; 900 is the same hue on navy */
	--st-palette-blue-tint-50: #edf2ff;
	--st-palette-blue-tint-900: #152238;
	--st-palette-terracotta-tint-50: #fff1ec;
	--st-palette-terracotta-tint-900: #2a1814;
	--st-palette-red-tint-50: #fff5f5;
	--st-palette-red-tint-900: #2a1416;
	--st-palette-amber-tint-50: #fff4e3;
	--st-palette-amber-tint-900: #2a2010;
	--st-palette-green-tint-50: #eaf3ee;
	--st-palette-green-tint-900: #14241c;

	--st-palette-scrim-navy: rgba(3, 20, 45, 0.38);
	--st-palette-scrim-navy-dark: rgba(0, 0, 0, 0.62);

	/* ColorStat heat ramps — data-encoding, not chrome. Hue carries meaning
	   (blue = goals, green = assists, amber = shots, orange = on-target,
	   rose = corners) and the 1–6 steps match the CSS classes
	   -minimal … -elite. Phase 3 re-points these against a dark surface;
	   do not invert them as if they were chrome. */
	--st-palette-heat-goals-1: #dde3f626;
	--st-palette-heat-goals-2: #dde3f673;
	--st-palette-heat-goals-3: #dde3f6b3;
	--st-palette-heat-goals-4: #dde3f6;
	--st-palette-heat-goals-5: #bfcefeb3;
	--st-palette-heat-goals-6: #bfcefe;
	--st-palette-heat-assists-1: #e2efe726;
	--st-palette-heat-assists-2: #e2efe773;
	--st-palette-heat-assists-3: #e2efe7;
	--st-palette-heat-assists-4: #8db99e80;
	--st-palette-heat-assists-5: #8db99eb3;
	--st-palette-heat-assists-6: #8db99e;
	--st-palette-heat-shots-1: #fde9bc4d;
	--st-palette-heat-shots-2: #fde9bc73;
	--st-palette-heat-shots-3: #fde9bca6;
	--st-palette-heat-shots-4: #fde9bcf2;
	--st-palette-heat-shots-5: #fde1a3;
	--st-palette-heat-shots-6: #ffda89;
	--st-palette-heat-ot-1: #fedbbf4d;
	--st-palette-heat-ot-2: #fedbbf73;
	--st-palette-heat-ot-3: #fedbbfa6;
	--st-palette-heat-ot-4: #fedbbff2;
	--st-palette-heat-ot-5: #fdcba3;
	--st-palette-heat-ot-6: #febe8a;
	--st-palette-heat-corners-1: #fdbcbc26;
	--st-palette-heat-corners-2: #fdbcbc73;
	--st-palette-heat-corners-3: #fdbcbcb3;
	--st-palette-heat-corners-4: #fdbcbce6;
	--st-palette-heat-corners-5: #f99d9db3;
	--st-palette-heat-corners-6: #f99d9d;

	/* ================================================================== */
	/* TIER 2 — SEMANTIC                                                   */
	/* ================================================================== */
	/* The role, pointed at a palette entry. This is the only colour tier
	   components may use, and the only one a theme redefines. */

	/* COLOR — brand.
	   Split by the job the navy does, because the three diverge once there
	   is a dark theme: a filled brand element stays recognisably "brand",
	   brand *text* has to lighten to clear contrast on a dark surface, and
	   the app header may stop being navy altogether. In the light theme all
	   four resolve to the same navy, which is exactly why one token used to
	   be enough. */
	--st-color-brand-fill: var(--st-palette-navy-800);        /* navy as a background: buttons, pills, marks */
	--st-color-brand-fill-hover: var(--st-palette-navy-700);
	--st-color-brand-text: var(--st-palette-navy-800);        /* navy as a foreground: headings, links, icons */
	--st-color-brand-text-hover: var(--st-palette-navy-700);
	--st-color-brand-line: var(--st-palette-navy-800);        /* navy as a border/outline/focus ring/caret */
	--st-color-brand-line-hover: var(--st-palette-navy-700);
	--st-color-header-bg: var(--st-palette-navy-800);         /* the app header bar specifically */

	/* DEPRECATED — kept so a missed call site still resolves to the same
	   navy rather than rendering nothing. Do not use in new code; pick the
	   brand-fill / brand-text / brand-line role that matches the property.
	   A dark theme cannot satisfy these. */
	--st-color-primary: var(--st-palette-navy-800);
	--st-color-primary-hover: var(--st-palette-navy-700);

	/* COLOR — the other hues, split by role for the same reason as the navy
	   above: each was carrying background, foreground and border duty at
	   once, and those diverge on dark (a green fill stays green; green
	   *text* on a dark surface has to lighten to stay legible). Warning
	   already had the split half-done — amber fails contrast as text, so
	   --st-color-warning-text was always the darker amber. */
	--st-color-indigo-fill: var(--st-palette-indigo-700);   /* auth & login screens */
	--st-color-indigo-text: var(--st-palette-indigo-700);
	--st-color-indigo-line: var(--st-palette-indigo-700);
	--st-color-indigo-bright-text: var(--st-palette-indigo-400); /* upcoming-chip label */

	--st-color-blue-bright-fill: var(--st-palette-blue-500); /* onboarding/walkthrough highlights */
	--st-color-blue-bright-text: var(--st-palette-blue-500);
	--st-color-blue-bright-line: var(--st-palette-blue-500);

	--st-color-accent-fill: var(--st-palette-terracotta-500); /* terracotta — data emphasis, active tabs */
	--st-color-accent-text: var(--st-palette-terracotta-500);
	--st-color-accent-line: var(--st-palette-terracotta-500);

	/* COLOR — status */
	--st-color-live-fill: var(--st-palette-green-600);   /* live-match tag, positive stats */
	--st-color-live-text: var(--st-palette-green-600);
	--st-color-live-line: var(--st-palette-green-600);
	/* Alpha-on-white equivalents, mixed into the live surface so they
	   restyle with the theme (form chips, livescore wash, countdown ring).
	   Percents match the old 8-digit hex: 32% ≡ #45825b52, 14% ≡ #45825b24,
	   25% ≡ #45825b40. */
	--st-color-live-fill-soft: color-mix(in srgb, var(--st-color-live-fill) 32%, var(--st-color-surface));
	--st-color-live-fill-faint: color-mix(in srgb, var(--st-color-live-fill) 14%, var(--st-color-surface));
	--st-color-live-fill-ring: color-mix(in srgb, var(--st-color-live-fill) 25%, var(--st-color-surface));

	--st-color-live-dark-fill: var(--st-palette-green-700); /* darker green, emphasis variant */
	--st-color-live-dark-text: var(--st-palette-green-700);
	--st-color-live-dark-line: var(--st-palette-green-700);

	--st-color-danger-fill: var(--st-palette-red-500);   /* errors, destructive actions */
	--st-color-danger-text: var(--st-palette-red-500);
	--st-color-danger-line: var(--st-palette-red-500);
	--st-color-danger-strong-fill: var(--st-palette-red-700); /* relegation, form-chip loss */
	--st-color-danger-strong-text: var(--st-palette-red-700);
	--st-color-danger-strong-fill-soft: color-mix(in srgb, var(--st-color-danger-strong-fill) 32%, var(--st-color-surface));
	--st-color-danger-soft-fill: var(--st-palette-red-400);   /* relegation-playoffs rank */

	--st-color-warning-fill: var(--st-palette-amber-400); /* beta labels, warnings */
	--st-color-warning-line: var(--st-palette-amber-400);
	--st-color-warning-text: var(--st-palette-amber-800); /* warning as text on white — amber-400 fails contrast */
	--st-color-warning-bright-fill: var(--st-palette-amber-300); /* form-chip draw */
	--st-color-warning-bright-text: var(--st-palette-amber-300);
	--st-color-warning-bright-fill-soft: color-mix(in srgb, var(--st-color-warning-bright-fill) 32%, var(--st-color-surface));
	/* The dark amber as a *fill*: a 6px provenance dot needs the darker value
	   to register against white, so it is a different role from the amber
	   fill above and will diverge from it on dark. */
	--st-color-warning-strong-fill: var(--st-palette-amber-800);

	/* DEPRECATED — same story as --st-color-primary: one token per hue could
	   not say whether it meant a fill, a foreground or a border. Kept defined
	   so nothing dangles; no call sites, and must not gain any. */
	--st-color-indigo: var(--st-palette-indigo-700);
	--st-color-blue-bright: var(--st-palette-blue-500);
	--st-color-accent: var(--st-palette-terracotta-500);
	--st-color-live: var(--st-palette-green-600);
	--st-color-live-dark: var(--st-palette-green-700);
	--st-color-danger: var(--st-palette-red-500);
	--st-color-warning: var(--st-palette-amber-400);

	/* COLOR — text */
	--st-color-text: var(--st-palette-grey-750);         /* default body & heading text */
	--st-color-text-strong: var(--st-palette-grey-900);  /* near-black, high-emphasis text */
	--st-color-text-muted: var(--st-palette-grey-600);   /* secondary/meta text */
	--st-color-text-slate: var(--st-palette-slate-500);  /* subdued stat labels on cards */
	--st-color-text-inverse: var(--st-palette-grey-0);   /* text on navy/dark surfaces */
	--st-color-text-disabled: var(--st-palette-grey-100); /* disabled label on a light button (.button-secondary:disabled) */
	--st-color-text-hint: var(--st-palette-grey-400);    /* empty-state icons, placeholder-weight labels */
	--st-color-text-faint: var(--st-palette-grey-450);   /* warm muted — inactive tab labels */
	--st-color-text-quiet: var(--st-palette-grey-500);   /* quiet captions */
	--st-color-text-secondary: var(--st-palette-grey-700); /* secondary labels, one step above muted */
	--st-color-text-ink: var(--st-palette-grey-800);     /* near-black body alt of --st-color-text */

	/* COLOR — surfaces.
	   -raised and -sunken are new roles that the light theme does not need:
	   white-on-near-white needs no elevation steps, so both collapse onto
	   surface/bg here. They exist because the four canonical shadows read as
	   almost nothing against a dark background, so elevation on dark has to
	   be expressed as surface lightness instead. */
	--st-color-surface: var(--st-palette-grey-0);          /* cards, modals */
	--st-color-surface-raised: var(--st-palette-grey-0);   /* above surface (light: identical) */
	--st-color-surface-sunken: var(--st-palette-grey-50);  /* below surface (light: the app bg) */
	--st-color-surface-muted: var(--st-palette-grey-100);  /* inactive/track surfaces: skeleton cards, non-active indicators, closed pickers */
	--st-color-surface-inverse: var(--st-palette-grey-750); /* dark surface carrying light text (tooltips) */
	--st-color-surface-faint: var(--st-palette-grey-75);   /* plain near-white fills (minutes column, closed rows) */
	--st-color-surface-dim: var(--st-palette-grey-200);    /* dim chip / neutral fill (draw, disabled) */
	--st-color-bg: var(--st-palette-grey-50);              /* app background, inactive states */
	--st-color-bg-lilac: var(--st-palette-grey-60);        /* lilac near-white — inactive panels, picker tracks */
	--st-color-inverse-bg: var(--st-palette-grey-1000);    /* web announcement ticker (iOS app promo) */
	--st-color-bg-tint-blue: var(--st-palette-blue-tint-50);         /* soft blue highlight background */
	--st-color-bg-tint-accent: var(--st-palette-terracotta-tint-50); /* soft terracotta highlight background */
	--st-color-bg-tint-danger: var(--st-palette-red-tint-50);        /* soft red background */
	--st-color-bg-tint-warning: var(--st-palette-amber-tint-50);     /* soft amber background — severity pills */
	--st-color-bg-tint-live: var(--st-palette-green-tint-50);        /* soft green background — severity pills */
	--st-color-scrim: var(--st-palette-scrim-navy);        /* navy dim behind popups and bottom sheets */

	/* COLOR — borders & dividers */
	--st-color-border: var(--st-palette-grey-100);        /* default divider/border */
	--st-color-border-cool: var(--st-palette-grey-80);    /* cool section/table rules (league/team pages) */
	--st-color-border-strong: var(--st-palette-grey-300); /* stronger border, table rules, dividers drawn as a 1px background */
	--st-color-border-faint: var(--st-palette-grey-450);  /* warm muted tab underline */
	--st-color-border-inverse: var(--st-palette-grey-0);  /* hairline on navy/coloured chrome (header focus ring, white underline) */

	/* COLOR — ColorStat heat. One token per (stat × intensity) so a dark
	   theme can retune a single step without collapsing the scale. The
	   standings rank dots reuse the elite step of the matching hue. */
	--st-color-heat-goals-minimal: var(--st-palette-heat-goals-1);
	--st-color-heat-goals-light: var(--st-palette-heat-goals-2);
	--st-color-heat-goals-moderate: var(--st-palette-heat-goals-3);
	--st-color-heat-goals-heavy: var(--st-palette-heat-goals-4);
	--st-color-heat-goals-intense: var(--st-palette-heat-goals-5);
	--st-color-heat-goals-elite: var(--st-palette-heat-goals-6);
	--st-color-heat-assists-minimal: var(--st-palette-heat-assists-1);
	--st-color-heat-assists-light: var(--st-palette-heat-assists-2);
	--st-color-heat-assists-moderate: var(--st-palette-heat-assists-3);
	--st-color-heat-assists-heavy: var(--st-palette-heat-assists-4);
	--st-color-heat-assists-intense: var(--st-palette-heat-assists-5);
	--st-color-heat-assists-elite: var(--st-palette-heat-assists-6);
	--st-color-heat-shots-minimal: var(--st-palette-heat-shots-1);
	--st-color-heat-shots-light: var(--st-palette-heat-shots-2);
	--st-color-heat-shots-moderate: var(--st-palette-heat-shots-3);
	--st-color-heat-shots-heavy: var(--st-palette-heat-shots-4);
	--st-color-heat-shots-intense: var(--st-palette-heat-shots-5);
	--st-color-heat-shots-elite: var(--st-palette-heat-shots-6);
	--st-color-heat-ot-minimal: var(--st-palette-heat-ot-1);
	--st-color-heat-ot-light: var(--st-palette-heat-ot-2);
	--st-color-heat-ot-moderate: var(--st-palette-heat-ot-3);
	--st-color-heat-ot-heavy: var(--st-palette-heat-ot-4);
	--st-color-heat-ot-intense: var(--st-palette-heat-ot-5);
	--st-color-heat-ot-elite: var(--st-palette-heat-ot-6);
	--st-color-heat-corners-minimal: var(--st-palette-heat-corners-1);
	--st-color-heat-corners-light: var(--st-palette-heat-corners-2);
	--st-color-heat-corners-moderate: var(--st-palette-heat-corners-3);
	--st-color-heat-corners-heavy: var(--st-palette-heat-corners-4);
	--st-color-heat-corners-intense: var(--st-palette-heat-corners-5);
	--st-color-heat-corners-elite: var(--st-palette-heat-corners-6);

	--st-color-rank-playoff-fill: var(--st-palette-heat-assists-6); /* conference / promotion-playoffs */
	--st-color-rank-possible-fill: var(--st-palette-heat-shots-6);  /* possible-playoffs */
	--st-color-rank-danger-soft-fill: var(--st-palette-red-400);    /* relegation-playoffs */
	--st-color-rank-danger-fill: var(--st-palette-red-700);        /* relegation */
	--st-color-heat-rule: color-mix(in srgb, var(--st-color-heat-goals-elite) 55%, var(--st-color-surface));

	/* ------------------------------------------------------------------ */
	/* TYPOGRAPHY                                                          */
	/* ------------------------------------------------------------------ */
	/* Sen = brand/display face (h1/h2, logo-adjacent); Roboto = body & data */
	--st-font-display: "Sen", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--st-font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--st-font-size-xs: 0.6875rem;   /* 11px — body default, dense stat text */
	--st-font-size-sm: 0.75rem;     /* 12px — buttons, labels */
	--st-font-size-md: 0.8125rem;   /* 13px — h3/h4, card titles */
	--st-font-size-base: 0.875rem;  /* 14px — most common component size */
	--st-font-size-lg: 1rem;        /* 16px — section headings */
	--st-font-size-xl: 1.125rem;    /* 18px — page-level emphasis */
	--st-font-size-2xl: 1.25rem;    /* 20px — h1/h2 */

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

	--st-letter-spacing: 0.6px;     /* global body letter-spacing */
	--st-letter-spacing-button: 1px;

	/* ------------------------------------------------------------------ */
	/* SPACING — 4px base rhythm                                           */
	/* ------------------------------------------------------------------ */
	--st-space-1: 4px;
	--st-space-2: 8px;
	--st-space-3: 12px;
	--st-space-4: 16px;
	--st-space-5: 20px;   /* default page-edge padding on mobile */
	--st-space-6: 24px;
	--st-space-8: 32px;

	/* ------------------------------------------------------------------ */
	/* SHAPE — radii                                                       */
	/* ------------------------------------------------------------------ */
	--st-radius-sm: 4px;    /* tags, badges, small chips */
	--st-radius-md: 8px;    /* DEFAULT — cards, inputs, panels */
	--st-radius-lg: 12px;   /* large cards, modals */
	--st-radius-xl: 16px;   /* hero surfaces */
	--st-radius-pill: 999px;
	/* native app cards use --native-card-radius (14px), see platform-native.css */

	/* ------------------------------------------------------------------ */
	/* ELEVATION — the four canonical shadows                              */
	/* ------------------------------------------------------------------ */
	--st-shadow-card: 0 0 6px 1px rgb(0 0 0 / 20%);     /* ambient card shadow */
	--st-shadow-raised: 0px 2px 5px 0px rgb(0 0 0 / 20%); /* directional, buttons/rows */
	--st-shadow-float: 0 4px 10px -2px rgb(0 0 0 / 10%);  /* soft float, modals/popovers */
	/* side panel over the page: shade cast left + hairline edge */
	--st-shadow-panel: -12px 0 28px -6px rgb(0 0 0 / 22%), -1px 0 0 0 rgb(0 0 0 / 8%);

	/* ------------------------------------------------------------------ */
	/* LAYOUT                                                              */
	/* ------------------------------------------------------------------ */
	--st-container-max: 1200px; /* desktop content max-width */

	/* ------------------------------------------------------------------ */
	/* MOTION                                                              */
	/* ------------------------------------------------------------------ */
	--st-duration-flip: 600ms; /* card 3D flip between insights and fixture */
	--st-duration-chrome: 0.25s; /* mobile-web date tabs + tab bar hide-on-scroll */
	--st-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* Ink-baked monochrome PNGs (close, arrows, 18+, search). Navy/two-tone
	   marks use genuine on-dark files via themedIcons.js instead. */
	--st-icon-ink-filter: none;

	/* ------------------------------------------------------------------ */
	/* NATIVE GLASS TAB BAR (iOS liquid glass)                              */
	/* ------------------------------------------------------------------ */
	/* Fill #fefefe @ 0.95 + 32px blur: near-solid frost so content behind
	   barely shows through; primary wash is separate. */
	--st-glass-fill: rgba(254, 254, 254, 0.95);
	--st-glass-border: rgba(255, 255, 255, 0.5);
	--st-glass-blur: 32px;
	--st-glass-saturate: 1.8;
	/* Top specular only — a full 1px border reads as a hard bottom line. */
	--st-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);
	/* Stacked navy drop-shadows (shape-following; stronger bottom lift). */
	--st-glass-shadow:
		drop-shadow(0 8px 20px rgba(3, 45, 95, 0.22))
		drop-shadow(0 2px 6px rgba(3, 45, 95, 0.14));
	--st-glass-active-pill: rgba(3, 45, 95, 0.12);
	--st-native-tab-bar-height: 56px;
	--st-native-tab-bar-offset: 4px;
	--st-native-tab-search-size: 56px;

	/* ------------------------------------------------------------------ */
	/* MOBILE-WEB BOTTOM CHROME                                            */
	/* ------------------------------------------------------------------ */
	/* Flat tab bar flush to the viewport bottom (<1100px only). */
	--st-web-tab-bar-height: 44px;
	/* Today / Tomorrow / 7 days strip — matches .filter padding-top on mobile. */
	--st-web-date-tabs-height: 46px;
}

/* ================================================================== */
/* TIER 2 — DARK                                                       */
/* ================================================================== */
/* Re-points every semantic colour (and the shadows / glass that have
   to follow). Palette values above do not change. Components do not
   change. A missing name here would silently inherit the light value —
   tests/designTokenTiers.test.js fails the suite if that happens.
   The switcher writes html[data-theme] when the flag is on (Phase 4);
   the pre-paint script in public/index.html does the same before Vue
   boots (Phase 5). */

:root[data-theme="dark"] {
	color-scheme: dark;

	/* Brand — fill stays a recognisable navy button; text/line go light
	   so links and icons clear contrast; the header is a darker elevated
	   surface rather than the same navy as a CTA. */
	--st-color-brand-fill: var(--st-palette-navy-500);
	--st-color-brand-fill-hover: var(--st-palette-navy-400);
	--st-color-brand-text: var(--st-palette-navy-300);
	--st-color-brand-text-hover: var(--st-palette-navy-200);
	--st-color-brand-line: var(--st-palette-navy-300);
	--st-color-brand-line-hover: var(--st-palette-navy-200);
	--st-color-header-bg: var(--st-palette-navy-950);

	/* Deprecated aliases: cannot satisfy fill+text+line, so they follow
	   fill (the historical default). No call sites; must not gain any. */
	--st-color-primary: var(--st-palette-navy-500);
	--st-color-primary-hover: var(--st-palette-navy-400);

	--st-color-indigo-fill: var(--st-palette-indigo-700);
	--st-color-indigo-text: var(--st-palette-indigo-400);
	--st-color-indigo-line: var(--st-palette-indigo-400);
	--st-color-indigo-bright-text: var(--st-palette-indigo-400);

	--st-color-blue-bright-fill: var(--st-palette-blue-500);
	--st-color-blue-bright-text: var(--st-palette-navy-300);
	--st-color-blue-bright-line: var(--st-palette-navy-300);

	--st-color-accent-fill: var(--st-palette-terracotta-500);
	--st-color-accent-text: var(--st-palette-terracotta-400);
	--st-color-accent-line: var(--st-palette-terracotta-400);

	--st-color-live-fill: var(--st-palette-green-600);
	--st-color-live-text: var(--st-palette-green-400);
	--st-color-live-line: var(--st-palette-green-400);
	--st-color-live-fill-soft: color-mix(in srgb, var(--st-color-live-fill) 32%, var(--st-color-surface));
	--st-color-live-fill-faint: color-mix(in srgb, var(--st-color-live-fill) 14%, var(--st-color-surface));
	--st-color-live-fill-ring: color-mix(in srgb, var(--st-color-live-fill) 25%, var(--st-color-surface));

	--st-color-live-dark-fill: var(--st-palette-green-700);
	--st-color-live-dark-text: var(--st-palette-green-400);
	--st-color-live-dark-line: var(--st-palette-green-400);

	--st-color-danger-fill: var(--st-palette-red-500);
	--st-color-danger-text: var(--st-palette-red-300);
	--st-color-danger-line: var(--st-palette-red-300);
	--st-color-danger-strong-fill: var(--st-palette-red-700);
	--st-color-danger-strong-text: var(--st-palette-red-300);
	--st-color-danger-strong-fill-soft: color-mix(in srgb, var(--st-color-danger-strong-fill) 32%, var(--st-color-surface));
	--st-color-danger-soft-fill: var(--st-palette-red-400);

	--st-color-warning-fill: var(--st-palette-amber-400);
	--st-color-warning-line: var(--st-palette-amber-400);
	--st-color-warning-text: var(--st-palette-amber-400); /* the light-theme darker amber is for contrast on white; on dark the bright amber is the one that reads */
	--st-color-warning-bright-fill: var(--st-palette-amber-300);
	--st-color-warning-bright-text: var(--st-palette-amber-300);
	--st-color-warning-bright-fill-soft: color-mix(in srgb, var(--st-color-warning-bright-fill) 32%, var(--st-color-surface));
	--st-color-warning-strong-fill: var(--st-palette-amber-400);

	--st-color-indigo: var(--st-palette-indigo-700);
	--st-color-blue-bright: var(--st-palette-blue-500);
	--st-color-accent: var(--st-palette-terracotta-500);
	--st-color-live: var(--st-palette-green-600);
	--st-color-live-dark: var(--st-palette-green-700);
	--st-color-danger: var(--st-palette-red-500);
	--st-color-warning: var(--st-palette-amber-400);

	/* Text — near-twins collapse: ink/strong/body are one light grey,
	   hint/faint/quiet are one muted grey. That's the fold Phase 2
	   deferred until a dark surface existed to judge them on. */
	--st-color-text: var(--st-palette-grey-100);
	--st-color-text-strong: var(--st-palette-grey-0);
	--st-color-text-ink: var(--st-palette-grey-100);
	--st-color-text-secondary: var(--st-palette-grey-300);
	--st-color-text-muted: var(--st-palette-grey-400);
	--st-color-text-quiet: var(--st-palette-grey-400);
	--st-color-text-hint: var(--st-palette-grey-500);
	--st-color-text-faint: var(--st-palette-grey-500);
	--st-color-text-slate: var(--st-palette-slate-300);
	--st-color-text-inverse: var(--st-palette-grey-0);
	--st-color-text-disabled: var(--st-palette-grey-700);

	/* Surfaces — elevation is lightness, not shadow. */
	--st-color-bg: var(--st-palette-navy-900);
	--st-color-surface: var(--st-palette-navy-850);
	--st-color-surface-raised: var(--st-palette-navy-700);
	--st-color-surface-sunken: var(--st-palette-navy-950);
	--st-color-surface-muted: var(--st-palette-navy-800);
	--st-color-surface-faint: var(--st-palette-navy-850);
	--st-color-surface-dim: var(--st-palette-navy-800);
	--st-color-surface-inverse: var(--st-palette-navy-700);
	--st-color-bg-lilac: var(--st-palette-navy-850);
	--st-color-inverse-bg: var(--st-palette-navy-950);
	--st-color-bg-tint-blue: var(--st-palette-blue-tint-900);
	--st-color-bg-tint-accent: var(--st-palette-terracotta-tint-900);
	--st-color-bg-tint-danger: var(--st-palette-red-tint-900);
	--st-color-bg-tint-warning: var(--st-palette-amber-tint-900);
	--st-color-bg-tint-live: var(--st-palette-green-tint-900);
	--st-color-scrim: var(--st-palette-scrim-navy-dark);

	--st-color-border: var(--st-palette-grey-700);
	--st-color-border-cool: var(--st-palette-grey-700);
	--st-color-border-strong: var(--st-palette-grey-600);
	--st-color-border-faint: var(--st-palette-grey-500);
	--st-color-border-inverse: rgb(255 255 255 / 18%);

	/* ColorStat — same elite hue, mixed into the dark surface so the
	   rungs still read wash → solid and never invert. */
	--st-color-heat-goals-minimal: color-mix(in srgb, var(--st-palette-heat-goals-6) 12%, var(--st-color-surface));
	--st-color-heat-goals-light: color-mix(in srgb, var(--st-palette-heat-goals-6) 22%, var(--st-color-surface));
	--st-color-heat-goals-moderate: color-mix(in srgb, var(--st-palette-heat-goals-6) 36%, var(--st-color-surface));
	--st-color-heat-goals-heavy: color-mix(in srgb, var(--st-palette-heat-goals-6) 52%, var(--st-color-surface));
	--st-color-heat-goals-intense: color-mix(in srgb, var(--st-palette-heat-goals-6) 72%, var(--st-color-surface));
	--st-color-heat-goals-elite: var(--st-palette-heat-goals-6);
	--st-color-heat-assists-minimal: color-mix(in srgb, var(--st-palette-heat-assists-6) 12%, var(--st-color-surface));
	--st-color-heat-assists-light: color-mix(in srgb, var(--st-palette-heat-assists-6) 22%, var(--st-color-surface));
	--st-color-heat-assists-moderate: color-mix(in srgb, var(--st-palette-heat-assists-6) 36%, var(--st-color-surface));
	--st-color-heat-assists-heavy: color-mix(in srgb, var(--st-palette-heat-assists-6) 52%, var(--st-color-surface));
	--st-color-heat-assists-intense: color-mix(in srgb, var(--st-palette-heat-assists-6) 72%, var(--st-color-surface));
	--st-color-heat-assists-elite: var(--st-palette-heat-assists-6);
	--st-color-heat-shots-minimal: color-mix(in srgb, var(--st-palette-heat-shots-6) 12%, var(--st-color-surface));
	--st-color-heat-shots-light: color-mix(in srgb, var(--st-palette-heat-shots-6) 22%, var(--st-color-surface));
	--st-color-heat-shots-moderate: color-mix(in srgb, var(--st-palette-heat-shots-6) 36%, var(--st-color-surface));
	--st-color-heat-shots-heavy: color-mix(in srgb, var(--st-palette-heat-shots-6) 52%, var(--st-color-surface));
	--st-color-heat-shots-intense: color-mix(in srgb, var(--st-palette-heat-shots-6) 72%, var(--st-color-surface));
	--st-color-heat-shots-elite: var(--st-palette-heat-shots-6);
	--st-color-heat-ot-minimal: color-mix(in srgb, var(--st-palette-heat-ot-6) 12%, var(--st-color-surface));
	--st-color-heat-ot-light: color-mix(in srgb, var(--st-palette-heat-ot-6) 22%, var(--st-color-surface));
	--st-color-heat-ot-moderate: color-mix(in srgb, var(--st-palette-heat-ot-6) 36%, var(--st-color-surface));
	--st-color-heat-ot-heavy: color-mix(in srgb, var(--st-palette-heat-ot-6) 52%, var(--st-color-surface));
	--st-color-heat-ot-intense: color-mix(in srgb, var(--st-palette-heat-ot-6) 72%, var(--st-color-surface));
	--st-color-heat-ot-elite: var(--st-palette-heat-ot-6);
	--st-color-heat-corners-minimal: color-mix(in srgb, var(--st-palette-heat-corners-6) 12%, var(--st-color-surface));
	--st-color-heat-corners-light: color-mix(in srgb, var(--st-palette-heat-corners-6) 22%, var(--st-color-surface));
	--st-color-heat-corners-moderate: color-mix(in srgb, var(--st-palette-heat-corners-6) 36%, var(--st-color-surface));
	--st-color-heat-corners-heavy: color-mix(in srgb, var(--st-palette-heat-corners-6) 52%, var(--st-color-surface));
	--st-color-heat-corners-intense: color-mix(in srgb, var(--st-palette-heat-corners-6) 72%, var(--st-color-surface));
	--st-color-heat-corners-elite: var(--st-palette-heat-corners-6);

	--st-color-rank-playoff-fill: var(--st-palette-heat-assists-6);
	--st-color-rank-possible-fill: var(--st-palette-heat-shots-6);
	--st-color-rank-danger-soft-fill: var(--st-palette-red-400);
	--st-color-rank-danger-fill: var(--st-palette-red-400);
	--st-color-heat-rule: color-mix(in srgb, var(--st-color-heat-goals-elite) 55%, var(--st-color-surface));

	/* Shadows recede; a hairline edge does the work the ambient shadow
	   did on white. Raised/float keep a real drop for overlay chrome. */
	--st-shadow-card: 0 0 0 1px rgb(255 255 255 / 6%);
	--st-shadow-raised: 0 8px 16px rgb(0 0 0 / 40%);
	--st-shadow-float: 0 12px 28px rgb(0 0 0 / 50%);
	--st-shadow-panel: -12px 0 28px -6px rgb(0 0 0 / 55%), -1px 0 0 0 rgb(255 255 255 / 8%);

	--st-glass-fill: rgba(12, 18, 28, 0.92);
	--st-glass-border: rgba(255, 255, 255, 0.08);
	--st-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
	--st-glass-shadow:
		drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45))
		drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
	--st-glass-active-pill: rgba(126, 173, 220, 0.18);

	--st-icon-ink-filter: brightness(0) invert(1);
}