/* Design tokens — the numbers from the mockup `Businessbet 15.fig`, named by role.
 * Line-heights are the INTEGER text-box heights Figma snaps to (14.3 → 14, 18.2 → 18):
 * calibration on F5 showed fractional values drift +0.3px per line against the frame.
 *
 * Filled at F2 (2026-09-14) from fig-tokens.js. Rules:
 *   · names say the role (--color-surface), never the value (--color-1, --fs-48);
 *   · values are not rounded "for tidiness" — 22px from the mockup stays 22px;
 *   · anything the mockup does not have (states, focus ring, motion) is marked below.
 * Merged near-duplicates (see F2 report): #6d28d9→#6c2bd9, #e5e7eb→#e2e8f0,
 * #f9fafb/#f5f6f8→#f8f9fa, #1c1e22→#1a1d21.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #0b0c0e;              /* page background, footer, nav */
  --color-surface: #111315;         /* utility bar, sport bar, bet slip, RG hub, cards on dark */
  --color-surface-2: #1a1d21;       /* nested panels on dark (racing cards, inputs) */
  --color-text: #ffffff;            /* primary text on dark */
  --color-muted: #9ca3af;           /* body text on dark */
  --color-muted-2: #6b7280;         /* labels, eyebrows on dark */
  --color-muted-3: #4e5459;         /* dim meta on dark (footer legal) */
  --color-dim: #4b5563;             /* dividers-as-text, disabled */
  --color-gray-500: #888e94;        /* mobile status meta */
  --color-gray-600: #5c626a;

  --color-brand: #ffde00;           /* yellow: CTA, odds highlight, links */
  --color-brand-2: #facc15;         /* yellow variant used on badges */
  --color-purple: #6b21a8;          /* hero / racing band background */
  --color-purple-light: #8b5cf6;    /* "View all →" links, active tabs */
  --color-purple-btn: #6c2bd9;      /* purple buttons, active nav pill */
  --color-purple-tint: rgba(139, 92, 246, .2);
  --color-purple-tint-2: rgba(139, 92, 246, .102);
  --color-red: #ef4444;             /* odds numbers, "Popular", BetStop */
  --color-green: #10b981;           /* potential return */
  --color-orange: #f97316;
  --color-black: #000000;

  /* light cards (market rows, modals) */
  --color-card: #ffffff;
  --color-card-2: #f8f9fa;          /* card sub-surface, modal bottom zone */
  --color-card-3: #f3f4f6;          /* selected odds bg, table header */
  --color-ink: #111827;             /* text on light cards */
  --color-ink-2: #374151;           /* secondary text on light */
  --color-ink-3: #6b7280;

  --color-border: #1f2937;          /* borders on dark */
  --color-border-2: #374151;        /* stronger borders on dark */
  --color-border-light: #e2e8f0;    /* borders on light cards */
  --color-border-input: #d1d5db;    /* inputs on light */
  --color-border-white-20: rgba(255, 255, 255, .2);

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-brand-hover: #ffe84d;
  --color-brand-active: #e6c800;
  --color-purple-btn-hover: #7c3aed;
  --color-purple-btn-active: #5b21b6;
  --color-error: #ef4444;           /* = mockup red, reused for form errors */
  --color-success: #10b981;
  --focus-ring: 0 0 0 3px rgba(255, 222, 0, .55);
  --focus-ring-light: 0 0 0 3px rgba(108, 43, 217, .45);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Archivo Black", "Archivo", system-ui, sans-serif;   /* headings, nav, uppercase labels */
  --font-body: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;                  /* odds, stakes, countdowns */
  --font-inter: "Inter", system-ui, sans-serif;                        /* used in a few modal labels */
  --font-narrow: "Archivo Narrow", "Archivo", sans-serif;
  --font-alt: "Archivo", system-ui, sans-serif;                        /* Archivo 500/600: mobile menu, a few labels */
  --fs-display: 56px;   /* hero h1 desktop */
  --fs-h1: 48px;
  --fs-h2: 28px;        /* section headings (EXPLORE SPORTS, RESPONSIBLE WAGERING) */
  --fs-h3: 20px;
  --fs-h4: 16px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-xs: 12px;
  --fs-xxs: 11px;
  --fs-micro: 10px;
  /* line-height goes in px per node, from the mockup — see F5-rules. These are
     only for text whose length is not fixed. */
  --lh-tight: 1;
  --lh-base: 1.6;       /* 15px → 24px in the mockup */
  --lh-relaxed: 1.733;  /* 15px → 26px in legal document flow */

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --radius-xs: 2px;
  --radius-sm: 4px;     /* the default radius of the mockup: cards, buttons, inputs */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 100px;
  --shadow-modal: 0 32px 64px rgba(0, 0, 0, .702);
  --shadow-sheet: 0 16px 32px rgba(0, 0, 0, .502);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .102);

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --container: 1280px;              /* 1440 − 2×80 */
  --container-pad: 80px;
  --container-pad-mobile: 16px;     /* 390 frames */
  --sidebar: 360px;                 /* bet slip column, gap 24 */

  /* ── Motion (added by us) ────────────────────────────────────────────── */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-sheet: 800;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-gate: 1100;
}

/* Breakpoints cannot be custom properties in media queries. The mockup widths
   live in kit.config.json; keep any change to these in step with it.
   --bp-mobile: 390px   (mockup mobile frame; "fit on 320" fixes only below 389px)
   --bp-switch: 1199px  (below — mobile layout)
   --bp-desktop: 1440px (mockup desktop frame) */