:root {
  /* === Sport accent (context-aware, single source of truth) ===
   * Channels are the source-of-truth (space-separated, modern rgb() syntax).
   * SportThemeProvider sets data-sport on a display:contents wrapper;
   * [data-sport="…"] selectors below override just the channels, and every
   * derived alpha-token re-resolves automatically.
   *
   * The brand `--color-primary*` tier (right below) is now derived from the
   * SAME channels — so changing sport repaints EVERY surface that consumes
   * --color-primary too. Default channels = brand orange (255 92 53), so
   * neutral pages look identical to before the feature.
   *
   * Components needing a one-off opacity: rgb(var(--sport-accent-rgb) / 0.25)
   */
  --sport-accent-rgb: 255 92 53;
  --sport-accent: rgb(var(--sport-accent-rgb));
  --sport-accent-bg: rgb(var(--sport-accent-rgb) / 0.14);
  --sport-accent-bg-strong: rgb(var(--sport-accent-rgb) / 0.22);
  --sport-accent-subtle: rgb(var(--sport-accent-rgb) / 0.06);
  --sport-accent-border: rgb(var(--sport-accent-rgb) / 0.32);
  --sport-accent-border-strong: rgb(var(--sport-accent-rgb) / 0.55);
  --sport-accent-glow: 0 0 20px rgb(var(--sport-accent-rgb) / 0.18);
  --sport-accent-glow-strong: 0 0 32px rgb(var(--sport-accent-rgb) / 0.28);

  /* === Brand (derived from --sport-accent-*) ===
   * Was hardcoded #FF5C35 etc. Now follows sport. Hover/light shades are
   * computed via color-mix so they stay readable on dark bg regardless of
   * which sport hue is active.
   */
  --color-primary: var(--sport-accent);
  --color-primary-hover: color-mix(in srgb, var(--sport-accent) 88%, #000);
  --color-primary-light: color-mix(in srgb, var(--sport-accent) 78%, #fff);
  --color-primary-muted: rgb(var(--sport-accent-rgb) / 0.12);
  --color-primary-subtle: rgb(var(--sport-accent-rgb) / 0.06);

  /* === Backgrounds === */
  --color-bg-primary: #07080C;
  --color-bg-secondary: #0C0E14;
  --color-bg-tertiary: #12161F;
  --color-bg-elevated: #1A2030;

  /* === Text === */
  --color-text-primary: #F4F1EA;
  --color-text-secondary: #B9C0CE;
  /* Третичный держит ≥4.5:1 и на фоне страницы (#07080C), и на карточке
     (#0C0E14), оставаясь тусклее вторичного — иерархия не ломается. */
  --color-text-tertiary: #98A1B4;
  --color-text-quaternary: #5A6376;
  --color-text-inverse: #0A0B0F;
  /* Always-white ink for text/icons sitting ON a coloured (accent/semantic)
     surface — stays white in BOTH themes, unlike --color-text-inverse which
     flips. Use this instead of a literal #fff on buttons/badges. */
  --color-on-accent: #FFFFFF;

  /* === Borders === */
  --color-border-default: rgba(244, 241, 234, 0.12);
  --color-border-subtle: rgba(244, 241, 234, 0.07);
  --color-border-strong: rgba(244, 241, 234, 0.22);

  /* === Semantic === */
  --color-success: #4ADE80;
  --color-success-muted: rgba(74, 222, 128, 0.12);
  --color-warning: #EAB308;
  --color-warning-muted: rgba(234, 179, 8, 0.12);
  --color-error: #F87171;
  --color-error-muted: rgba(248, 113, 113, 0.12);
  --color-info: #6FA8FF;
  --color-info-muted: rgba(111, 168, 255, 0.12);

  /* === Sport Accents === */
  --color-sport-volleyball: #FF5C35;
  --color-sport-football: #22C55E;
  --color-sport-basketball: #EAB308;
  --color-sport-tennis: #3B82F6;
  --color-sport-running: #A855F7;

  /* === Typography === */
  /* Unbounded — только заголовки и цифры (широкий, в body нечитаем на 13-14px).
     Golos Text — весь текст интерфейса. */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Golos Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Unbounded на крупных кеглях распирает строку — сжимаем трекингом. */
  --tracking-display: -0.03em;
  --tracking-tight: -0.02em;

  --text-hero: 32px;
  --text-h1: 24px;
  --text-h2: 18px;
  --text-h3: 15px;
  --text-body: 14px;
  --text-caption: 12px;
  --text-micro: 10px;

  --leading-tight: 1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

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

  /* === Spacing === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --padding-card: 16px;
  --padding-screen: 20px;
  --padding-section: 24px;
  --gap-list: 10px;
  --gap-cards: 12px;

  /* === Border Radius === */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-2xl: 26px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgb(var(--sport-accent-rgb) / 0.15);
}

/* === Per-sport accent channels ===
 * SportThemeProvider sets data-sport on a wrapping element. The selectors
 * below override the channels AND redeclare every derived token, because
 * CSS var() substitution happens at the element where the property is
 * DECLARED — chained `--color-primary: var(--sport-accent)` at :root
 * already resolves to brand orange before children inherit. To make the
 * override actually flow into derived tokens, each [data-sport="…"] block
 * must redeclare the derived tokens so their var() resolves against the
 * LOCAL --sport-accent-rgb.
 *
 * Hex → "R G B" (space-separated, modern rgb() syntax). When you add a
 * new sport, mirror the value in packages/shared/src/sports/<sport>.ts.
 */

/* Shared derivation block — applied to every per-sport selector via
 * a custom property suffix. Done as a CSS rule that targets the same
 * elements via the [data-sport] attribute (any value). */
[data-sport] {
  --sport-accent: rgb(var(--sport-accent-rgb));
  --sport-accent-bg: rgb(var(--sport-accent-rgb) / 0.14);
  --sport-accent-bg-strong: rgb(var(--sport-accent-rgb) / 0.22);
  --sport-accent-subtle: rgb(var(--sport-accent-rgb) / 0.06);
  --sport-accent-border: rgb(var(--sport-accent-rgb) / 0.32);
  --sport-accent-border-strong: rgb(var(--sport-accent-rgb) / 0.55);
  --sport-accent-glow: 0 0 20px rgb(var(--sport-accent-rgb) / 0.18);
  --sport-accent-glow-strong: 0 0 32px rgb(var(--sport-accent-rgb) / 0.28);
  --color-primary: var(--sport-accent);
  --color-primary-hover: color-mix(in srgb, var(--sport-accent) 88%, #000);
  --color-primary-light: color-mix(in srgb, var(--sport-accent) 78%, #fff);
  --color-primary-muted: rgb(var(--sport-accent-rgb) / 0.12);
  --color-primary-subtle: rgb(var(--sport-accent-rgb) / 0.06);
  --shadow-glow: 0 0 20px rgb(var(--sport-accent-rgb) / 0.15);
}

[data-sport="volleyball"]        { --sport-accent-rgb: 255 92 53; }   /* #FF5C35 — same as brand */
[data-sport="beach_volleyball"]  { --sport-accent-rgb: 251 191 36; }  /* #FBBF24 */
[data-sport="football"]          { --sport-accent-rgb: 34 197 94; }   /* #22C55E */
[data-sport="basketball"]        { --sport-accent-rgb: 234 179 8; }   /* #EAB308 */
[data-sport="hockey"]            { --sport-accent-rgb: 99 102 241; }  /* #6366F1 */
[data-sport="tennis"]            { --sport-accent-rgb: 59 130 246; }  /* #3B82F6 */
[data-sport="badminton"]         { --sport-accent-rgb: 6 182 212; }   /* #06B6D4 */
[data-sport="table_tennis"]      { --sport-accent-rgb: 236 72 153; }  /* #EC4899 */

/* ============================================================================
 * THEME PALETTES (light / dark)
 * ----------------------------------------------------------------------------
 * Only NEUTRAL color tokens flip with the theme — backgrounds, text, borders,
 * shadows, semantic-muted fills. Non-color tokens (spacing, radius, typography)
 * and the sport-accent channels live in :root and are theme-independent.
 *
 * Dark is the baseline (already declared in :root above). The two blocks below
 * are attribute selectors, NOT tied to <html>, so they work at ANY nesting:
 *   - <html data-theme="…">  drives the whole app (set by src/lib/theme.ts)
 *   - <div  data-theme="dark"> wraps the landing so it stays dark regardless
 *     of the user's choice — children inherit the re-declared dark tokens.
 *
 * Source order matters: when <html data-theme="light">, both :root and
 * [data-theme="light"] match with equal specificity (0,1,0) — light wins
 * because it comes later. Keep these blocks at the bottom of this file.
 * ==========================================================================*/

[data-theme="dark"] {
  --color-bg-primary: #07080C;
  --color-bg-secondary: #0C0E14;
  --color-bg-tertiary: #12161F;
  --color-bg-elevated: #1A2030;

  /* Чернила тёплые (#F4F1EA), а не голубоватые — так текст не звенит на
     холодном асфальтовом фоне. Вторичный/третичный сохраняют контраст AA. */
  --color-text-primary: #F4F1EA;
  --color-text-secondary: #B9C0CE;
  --color-text-tertiary: #98A1B4;
  --color-text-quaternary: #5A6376;
  --color-text-inverse: #0A0B0F;

  /* Границы — волосок того же чернила на прозрачности, а не отдельный серый:
     держит один тон на любой поверхности (карточка, модалка, шапка). */
  --color-border-default: rgba(244, 241, 234, 0.12);
  --color-border-subtle: rgba(244, 241, 234, 0.07);
  --color-border-strong: rgba(244, 241, 234, 0.22);

  /* Семантика на тёмном светлее базовой: #22C55E и #EF4444 на #07080C
     выглядят грязно, канва использует смягчённые тона. */
  --color-success: #4ADE80;
  --color-error: #F87171;
  --color-info: #6FA8FF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Faint surface tint for hover/inset fills. White-on-dark; flips to
     black-on-light below so it stays visible on white cards. */
  --overlay-soft: rgba(255, 255, 255, 0.04);
  --overlay-medium: rgba(255, 255, 255, 0.08);

  /* Translucent backdrop for blur bars (top sport bar, sticky headers). */
  --color-bar-bg: rgba(6, 8, 16, 0.78);

  /* Герой в макете — та же плоская панель, что и карточки: без градиента и
     без цветного свечения. Токен свечения держим на нуле, чтобы разметка
     героев осталась прежней. */
  --hero-bg: var(--color-bg-secondary);
  --hero-glow-opacity: 0;
  --hero-glow-2: #4CC2FF;
  --hero-cd-color: var(--color-text-primary);

  /* Стекло и точечный фон убраны вместе с бенто-подложкой — оставлены
     переменные только для обратной совместимости со сторонними стилями. */
  --glass-bg: var(--color-bg-secondary);
  --glass-border: var(--color-border-default);
  --pattern-dot: transparent;
}

[data-theme="light"] {
  /* Backgrounds — soft off-white page, pure-white cards so elevation reads. */
  --color-bg-primary: #F4F6FA;
  --color-bg-secondary: #FFFFFF;
  --color-bg-tertiary: #EDF1F7;
  --color-bg-elevated: #FFFFFF;

  /* Text — near-black primary (not pure #000), all pairs ≥ WCAG AA. */
  --color-text-primary: #0E1320;
  --color-text-secondary: #586074;
  --color-text-tertiary: #858EA1;
  --color-text-quaternary: #AEB6C4;
  --color-text-inverse: #FFFFFF;

  /* Borders — cool light greys, subtle hairlines on white. */
  --color-border-default: #E3E8F0;
  --color-border-subtle: #EDF1F7;
  --color-border-strong: #D0D7E2;

  /* На белом смягчённые тёмные тона теряют контраст — возвращаем базовые. */
  --color-success: #16A34A;
  --color-error: #DC2626;
  --color-info: #2563EB;

  /* Semantic muted fills — a touch lighter so they don't shout on white. */
  --color-success-muted: rgba(34, 197, 94, 0.12);
  --color-warning-muted: rgba(234, 179, 8, 0.16);
  --color-error-muted: rgba(239, 68, 68, 0.10);
  --color-info-muted: rgba(59, 130, 246, 0.10);

  /* Primary tint tokens re-derived softer for white surfaces. */
  --color-primary-muted: rgb(var(--sport-accent-rgb) / 0.10);
  --color-primary-subtle: rgb(var(--sport-accent-rgb) / 0.05);

  /* Shadows — neutral-blue ink at low alpha; the dark theme's near-black
     shadows look like dirt on a light page. */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, 0.14);
  --shadow-glow: 0 0 20px rgb(var(--sport-accent-rgb) / 0.12);

  /* Sport-accent alpha surfaces read a hair stronger on white. */
  --sport-accent-bg: rgb(var(--sport-accent-rgb) / 0.12);
  --sport-accent-bg-strong: rgb(var(--sport-accent-rgb) / 0.20);
  --sport-accent-subtle: rgb(var(--sport-accent-rgb) / 0.07);

  /* Hover/inset fills flip to a faint dark tint so they read on white. */
  --overlay-soft: rgba(16, 24, 40, 0.04);
  --overlay-medium: rgba(16, 24, 40, 0.07);

  /* Blur bars go frosted-white on light. */
  --color-bar-bg: rgba(255, 255, 255, 0.80);

  /* На светлой теме герой тоже плоский — карточка без подложки. */
  --hero-bg: var(--color-bg-secondary);
  --hero-glow-opacity: 0;
  --hero-glow-2: #7FB6F2;
  /* Countdown numbers go dark (not accent) on light — accent-on-accent blended. */
  --hero-cd-color: var(--color-text-primary);

  --glass-bg: var(--color-bg-secondary);
  --glass-border: var(--color-border-default);
  --pattern-dot: transparent;
}