/* Design tokens — from the approved mockup B "Line Board"
 * (mockups/sportsiteraction.com/b-line-board.html, 2026-11-02).
 * Palette is fixed by ТЗ §1.3. Values marked "added" are not in the mockup.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #111A20;
  --surface-0: #0D151A;
  --surface-1: #1D2B34;
  --surface-2: #22333E;
  --surface-3: #2A3E4A;
  --color-brand: #F0B429;
  --color-brand-ink: #1A1300;
  --color-accent: #2F8C82;
  --color-accent-hi: #4FBFB1;
  --color-text: #FFFFFF;
  --color-muted: #B8C5CD;
  --color-faint: #8A9CA7;          /* mockup #80939E lifted to 4.6:1 on surface-1 */
  --color-live: #FF5A5F;
  --line: color-mix(in oklab, #B8C5CD 14%, transparent);
  --line-strong: color-mix(in oklab, #B8C5CD 26%, transparent);

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-hover: color-mix(in oklab, var(--color-brand) 88%, white);
  --color-brand-active: color-mix(in oklab, var(--color-brand) 85%, black);
  --color-error: #FF8A8E;
  --color-success: #7EE0B5;
  --tint-brand: color-mix(in oklab, var(--color-brand) 14%, transparent);
  --tint-accent: color-mix(in oklab, var(--color-accent) 18%, transparent);
  --tint-live: color-mix(in oklab, var(--color-live) 16%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-brand) 55%, transparent);

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --fs-h1: clamp(2.2rem, 1.3rem + 3vw, 4.25rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-h3: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-label: 12px;
  --lh-tight: 1.05;
  --lh-base: 1.55;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px; --space-96: 96px;
  --section-y: clamp(64px, 8vw, 120px);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .25), 0 14px 34px -14px rgb(0 0 0 / .6);
  --shadow-pop: 0 2px 4px rgb(0 0 0 / .3), 0 24px 60px -20px rgb(0 0 0 / .7);

  /* ── Container ───────────────────────────────────────────────────────── */
  --container: 1320px;
  --container-pad: clamp(16px, 3.4vw, 32px);

  /* ── Motion (added) ──────────────────────────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-tabbar: 110;
  --z-overlay: 900;
  --z-toast: 950;
  --z-modal: 1000;
}

/* Breakpoints (kit.config.json → breakpoints): 390 · 640 · 820 · 1080 · 1440 */