/* Design tokens — litesports.be
 * Source: mockups/litesports.be/b2-kinetic-matchline.html (approved 2026-10-09, «Matchline», Kinetic restrained).
 * Mockup values moved as they are; everything marked "added" is not in the mockup but needed to build the site.
 */
:root {
  /* ── Colour: surfaces (mockup) ───────────────────────────────────────── */
  --color-bg: #0B1412;
  --color-surface-1: #121D1A;
  --color-surface-2: #1A2824;
  --color-surface-3: #223430;
  --color-border: #2C3F3A;
  --color-border-soft: rgb(44 63 58 / .6);

  /* ── Colour: text (mockup) ───────────────────────────────────────────── */
  --color-text: #F2F6F3;
  --color-text-2: #A3B5AE;          /* 8.6:1 on --color-bg */
  --color-text-3: #869990;          /* added: mockup #74877F was 4.3:1 on surface-1 — lifted to 5.3:1 for AA */

  /* ── Colour: roles (mockup) ──────────────────────────────────────────── */
  --color-brand: #D8F35C;           /* primary actions, selected price, momentum line */
  --color-on-brand: #0B1412;
  --color-brand-tint: color-mix(in oklab, #D8F35C 16%, transparent);
  --color-warm: #F2BD60;            /* secondary highlight, warnings (ТЗ §3.2 warning) */
  --color-success: #35C48B;         /* price up, wins, ok states (ТЗ §3.2) */
  --color-error: #F16B6B;           /* live, price down, errors (ТЗ §3.2) */
  --color-live-text: #FFB0B0;       /* live label on dark pills */
  --color-duotone: #1F6B52;         /* photo tint */

  /* ── Colour: states (added) ──────────────────────────────────────────── */
  --color-brand-hover: #E6FD80;
  --color-error-tint: rgb(241 107 107 / .12);
  --color-success-tint: rgb(53 196 139 / .12);
  --color-warm-tint: rgb(242 189 96 / .12);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--color-brand) 55%, transparent);
  --scrim: rgb(5 10 9 / .72);

  /* ── Typography (mockup) ─────────────────────────────────────────────── */
  --font-display: Manrope, system-ui, sans-serif;
  --font-body: Manrope, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --fs-score: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --fs-h1: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);
  --fs-h2: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  --fs-h3: 1.0625rem;
  --fs-body: .9375rem;
  --fs-sm: .8125rem;
  --fs-xs: .75rem;
  --fs-2xs: .6875rem;
  --lh-tight: 1.05;
  --lh-base: 1.5;
  --tracking-tight: -.025em;

  /* ── Space (4-point scale, added as names for the mockup's values) ──── */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;

  /* ── Shape & depth (mockup) ──────────────────────────────────────────── */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;
  --shadow-2: 0 1px 2px rgb(0 0 0 / .3), 0 24px 48px -20px rgb(0 0 0 / .7);

  /* ── Shell (mockup) ──────────────────────────────────────────────────── */
  --rail: 248px;
  --slip: 332px;
  --main-pad: 20px;
  --content-max: 860px;             /* added: reading width for text pages */
  --tap: 44px;

  /* ── Motion (mockup) ─────────────────────────────────────────────────── */
  --ease: cubic-bezier(.22, .8, .24, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-sticky: 40;
  --z-sheetbar: 50;
  --z-tabbar: 55;
  --z-sheet: 60;
  --z-search: 70;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Breakpoints (constants, keep in step with kit.config.json):
   ≤1279 tablet — rail collapses to a top bar, slip becomes a bottom sheet (ТЗ §3.3)
   ≤767  mobile — bottom tab bar, sport chips scroll, sheet above the tab bar
   ≥1441 wide   — wide.css centres the shell */