/* Design tokens — the numbers from the mockup, named by role.
 *
 * Source: Betabets 1.fig (fig-tokens.js, 2026-09-14). Values are NOT rounded:
 * what the mockup draws is what the token holds. Anything the mockup does not
 * contain (hover/active, focus ring, motion, z-index) is marked "added by us".
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #0b0b10;            /* page ground, header, footer                */
  --color-bg-deep: #050508;       /* darkest band (warning strip, payments)     */
  --color-surface: #111116;       /* hero, cards on dark                        */
  --color-surface-2: #17171e;     /* nested card / bet slip on dark             */
  --color-surface-3: #1a1a1f;     /* input on dark, odds chip                   */
  --color-ink: #1a1a22;           /* dark text on light + dark button bg        */
  --color-line-dark: rgba(255, 255, 255, .071);  /* hairlines on dark            */
  --color-line-dark-2: #2a2a35;   /* solid stroke on dark                       */

  --color-light: #eceaff;         /* light "stone" section, modals              */
  --color-light-2: #e3e1ff;       /* light card / tab strip                     */
  --color-light-3: #ede9e3;       /* warm off-white: headline text on dark      */
  --color-line-light: #d3cfff;    /* hairlines on light                         */
  --color-line-light-2: #d4d0ca;

  --color-text: #ede9e3;          /* primary text on dark                       */
  --color-text-light: #ffffff;
  --color-muted-fig: #6b7280;     /* mockup value: 4.06:1 on #0b0b10, 4.09:1 on #eceaff */
  --color-muted: #7d8493;         /* a11y lift agreed at F3: ≥4.75:1 on every dark surface (#1a1a22 incl.) */
  --color-muted-light: #5d6472;   /* same role on the light stone: ≥4.67:1                */
  --color-muted-2: #9ca3af;       /* lighter secondary on dark                  */
  --color-muted-3: #8c8c99;
  --color-muted-4: #cbd5e1;       /* lead paragraph on dark                     */
  --color-text-dark: #374151;     /* body on light                              */
  --color-text-dark-2: #3f3f46;
  --color-text-dark-3: #3a3a42;
  --color-text-dark-4: #5c5c66;

  --color-brand: #7c6fff;         /* violet accent, primary button              */
  --color-brand-2: #8b7fff;       /* mockup: phone number in the help pill      */
  --color-brand-ink: #5b4de0;     /* a11y (F3): brand links on the light stone, 4.6:1 */
  --color-brand-3: #9e94ff;       /* brand on dark deep                         */
  --color-brand-soft: rgba(124, 111, 255, .251);

  --color-danger: #ff4b4b;        /* 18+ badge, "debit cards only"              */
  --color-danger-2: #ff6b6b;
  --color-danger-3: #ef4444;
  --color-danger-bg: rgba(255, 75, 75, .122);
  --color-danger-line: rgba(255, 75, 75, .251);
  --color-danger-bg-2: rgba(239, 68, 68, .122);
  --color-danger-line-2: rgba(239, 68, 68, .251);

  --color-scrim: rgba(0, 0, 0, .75);   /* age gate .749, login .702, reset .651 */

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-brand-hover: #6d5fff;
  --color-brand-active: #5f50f5;
  --color-error: #ff6b6b;
  --color-success: #3ddc97;
  --focus-ring: 0 0 0 3px rgba(124, 111, 255, .55);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Unbounded", system-ui, sans-serif;     /* Black 900 / ExtraBold 800 */
  --font-body: "Archivo", system-ui, sans-serif;          /* 400 500 600 700 800 900   */
  --font-mono: "Geist Mono", ui-monospace, monospace;     /* 400 500 600 700 800 900   */

  --fs-display: 72px;   /* hero "BET THE MOMENT." */
  --fs-h1: 56px;        /* page intros                                       */
  --fs-h1-sm: 48px;     /* legal hero, hero on mobile                        */
  --fs-h2: 32px;        /* section titles                                    */
  --fs-h2-sm: 28px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-lead: 16px;
  --fs-body: 15px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-micro: 12px;
  --fs-eyebrow: 11px;   /* mono ExtraBold, uppercase, tracked                */
  --fs-tiny: 10px;

  /* line-height goes in px per node, from the mockup (mostly 100%; body 15/17,
     16/18, 14/16 — i.e. font-size + 2px). These are only for flowing text. */
  --lh-tight: 1;
  --lh-base: 1.5;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --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-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-10: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 18px;   /* modals */
  --radius-3xl: 20px;   /* age gate */
  --radius-pill: 999px;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, .149);
  --shadow-float: 0 16px 32px rgba(0, 0, 0, .502);
  --shadow-glow: 0 0 12px rgba(124, 111, 255, .251);
  --shadow-modal: 0 16px 40px rgba(0, 0, 0, .2);

  /* ── Container: from the mockup (1440 wide, 80px side padding, no grid) ── */
  --container: 1280px;
  --container-pad: 80px;
  --container-pad-m: 20px;   /* 390 frame */

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

  /* ── Layers (added by us) ────────────────────────────────────────────── */
  --z-sticky: 50;
  --z-header: 100;
  --z-float: 500;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Breakpoints cannot be custom properties in media queries. The mockup widths
   live in kit.config.json; keep any change in step with it.
   --bp-mobile: 390px   (mockup mobile frame; the mobile branch is @media (max-width: 1199px))
   --bp-desktop: 1440px (mockup desktop frame) */

/* Wider than the 1440 frame: the content stays 1280 and centres — the side padding grows,
   the section backgrounds stay full-bleed (the percent resolves against the full-bleed section). */
@media (min-width: 1441px) {
  :root { --container-pad: max(80px, calc((100% - var(--container)) / 2)); }
}