/* Design tokens — the numbers from the mockup, named by role.
 *
 * Source: `лотто 9.fig` (frames palmer-bets-*), parsed 2026-09-11 by fig-pull,
 * values from fig-tokens.js / fig-spec.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;
 *   · near-duplicate greys are kept as separate tokens on purpose: inspect.js
 *     compares colours with a distance of 2, merging them would fail the gate;
 *   · anything the mockup does not have (states, focus ring, motion) is marked below.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #f8f9fa;               /* page ground (main-sportsbook, hero of inner pages) */
  --color-white: #ffffff;            /* cards, explore-sports, support-strip */
  --color-surface: #f0f2f4;          /* utility bar, RG section, bet slip, promo tags */
  --color-surface-2: #f7f7f8;        /* soft panels (legal aside, help topics) */
  --color-surface-3: #f5f5f5;        /* input ground on light */
  --color-surface-4: #fafafa;        /* table header */
  --color-dark: #111315;             /* header, footer, racing band — and primary text */
  --color-dark-2: #1e2124;           /* hero, dark cards, mobile menu banner */
  --color-dark-3: #2e3236;           /* borders on dark, dark chips */
  --color-dark-4: #2c2c30;           /* borders on dark (payments strip) */
  --color-text: #111315;
  --color-text-2: #333333;           /* legal body copy */
  --color-muted: #4e5459;            /* secondary copy on light */
  --color-muted-2: #5c626a;          /* secondary copy, lighter */
  --color-muted-3: #888e94;          /* captions, meta, legal line in footer */
  --color-muted-4: #666666;          /* single use: Gambling Help note on the RG page (57:300) */
  --color-on-dark: #b5bac0;          /* copy on dark ground (footer links) */
  --color-brand: #d92626;            /* red: CTA, odds, links, active tab */
  --color-brand-deep: #cc0000;       /* single use: promo badge */
  --color-brand-tint: rgba(217, 38, 38, 0.125);  /* DEBIT ONLY, AFL tag ground */
  --color-brand-tint-2: #fdf2f2;     /* error/notice ground */
  --color-success: #10b981;          /* POTENTIAL RETURN */
  --color-border: #e1e4e6;           /* card borders on light */
  --color-border-2: #e5e5e5;         /* dividers in legal/help */
  --color-border-3: #e0e0e0;         /* input borders */
  --color-border-4: #d2d6d9;         /* odds buttons */
  --color-border-dark: #2e3236;      /* dividers on dark */
  --color-scrim: rgba(0, 0, 0, 0.8); /* modal backdrop */
  --color-white-10: rgba(255, 255, 255, 0.102);
  --color-white-06: rgba(255, 255, 255, 0.063);
  --color-white-12: rgba(255, 255, 255, 0.122);
  --color-white-20: rgba(255, 255, 255, 0.2);

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-brand-hover: #c11f1f;
  --color-brand-active: #a81a1a;
  --color-error: #c11f1f;
  --color-disabled: #b5bac0;
  --focus-ring: 0 0 0 3px rgba(217, 38, 38, 0.45);
  --focus-ring-on-dark: 0 0 0 3px rgba(255, 255, 255, 0.55);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif; /* Bold 700 / SemiBold 600 */
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;   /* 400…900 */
  --fs-hero: 44px;        /* hero h1, Archivo Narrow Bold, lh 48 */
  --fs-h1: 36px;          /* page titles (SPORTS BETTING, RACING) */
  --fs-h1-lg: 48px;       /* about-us headline, legal h1 */
  --fs-h2: 24px;          /* section titles (POPULAR MARKETS) */
  --fs-h3: 20px;          /* sub-section (EXPLORE SPORTS, RACING) */
  --fs-h4: 18px;          /* card titles, mobile menu items */
  --fs-lead: 16px;
  --fs-body: 15px;        /* body paragraphs on inner pages */
  --fs-ui: 14px;          /* buttons, card copy, nav */
  --fs-small: 13px;       /* footer links, meta */
  --fs-caption: 12px;     /* eyebrows, labels, utility bar */
  --fs-tiny: 11px;        /* badges, legal line */
  --fs-micro: 10px;       /* tag chips */
  --ls-eyebrow: 0.13em;   /* Geist Bold 12 uppercase eyebrows */
  --ls-label: 0.08em;     /* small uppercase labels */
  /* line-height goes in px per node, from the mockup — see F5-rules. These are
     only for text whose length is not fixed (long legal copy). */
  --lh-tight: 1.1;
  --lh-base: 1.6;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-xs: 2px;
  --radius-sm: 3px;       /* badges (18+ chip in support strip) */
  --radius: 4px;          /* buttons, cards, inputs — the default */
  --radius-md: 6px;       /* bet slip, race cards */
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 100px;
  --shadow-modal: 0px 12px 32px 0px rgba(0, 0, 0, 0.251);
  --shadow-sheet: 0px -8px 24px 0px rgba(0, 0, 0, 0.251);
  --shadow-cta: 0px 4px 12px 0px rgba(217, 38, 38, 0.251);
  --shadow-bar: 0px -4px 16px 0px rgba(0, 0, 0, 0.149);

  /* ── Container: from the mockup (1440 with 80px sides; 390 with 16px) ── */
  --container: 1280px;
  --container-pad: 80px;
  --container-pad-mobile: 16px;
  --header-h: 72px;
  --utility-h: 36px;

  /* ── 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-sticky: 50;
  --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)
   --bp-switch: 1199px  (below — mobile layout, project.vars.yml BREAKPOINTS.switch)
   --bp-desktop: 1440px (mockup desktop frame) */