/* Design tokens — the numbers from the mockup, named by role.
 *
 * Source: "лотто 19.fig" → figma/ (parsed 2026-09-08), summary in figma/INVENTORY.md.
 * Filled at F2 from the output of 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.
 * Per-node font sizes and line-heights live in the component CSS: the mockup uses
 * 30 sizes, so only the recurring ones are tokens.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #0a0f1e;             /* page ground, 772 uses */
  --color-surface: #11172a;        /* raised block on the dark ground */
  --color-surface-2: #141a2e;      /* nested block: bet slip rows, tables */
  --color-light: #f3f4f6;          /* light sections: markets, competitions */
  --color-light-2: #f5f5f5;        /* light surface on legal pages */
  --color-sand: #e6e0d9;           /* racing accent surface */

  --color-text: #ffffff;           /* text on the dark ground, 918 uses */
  --color-text-dark: #0a0f1e;      /* text on the light sections */
  --color-muted: #9ca3af;          /* secondary text on dark, 581 uses */
  --color-muted-dark: #6b7280;     /* secondary text on light */
  /* The same grey clears 4.5:1 on white (4.83) but not on the #f3f4f6 band (4.39).
     Inside that band it goes one step darker — 4.66 — so the mockup's value is kept
     everywhere it actually reads. Redefining the token means every child follows. */
  --color-muted-dark-onlight: #676e7c;
  --color-body-dark: #333333;      /* long copy on legal pages */

  --color-brand: #ef4444;          /* accent, 1039 uses */
  --color-border: #2a2f3a;         /* stroke on dark, 322 uses */
  --color-border-light: #e5e7eb;   /* stroke on light, 455 uses */

  /* Dark at the top, brand red at the bottom. The .fig export wrote this as CSS
     "0deg", which in CSS points the gradient line upwards and puts the first stop
     at the BOTTOM — the opposite of the file. Figma's gradientTransform, inverted,
     puts the dark stop at y=0.20 and the red one at y=1.00, so: 180deg from 20%. */
  --grad-brand: linear-gradient(180deg, #0a0f1e 20%, #ef4444 100%);    /* hero, racing, footer */
  --grad-brand-soft: linear-gradient(180deg, #0a0f1e 20%, rgba(239, 68, 68, .2) 100%);
  --overlay-scrim: rgba(5, 7, 15, .816);   /* modal backdrop */

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-brand-hover: #f26a6a;    /* lighter: the brand sits on a dark ground */
  --color-brand-active: #b81414;   /* the mockup's single darker red, reused as :active */
  --color-error: #ef4444;          /* the brand red doubles as the error colour */
  --color-success: #16a34a;
  --color-disabled: #6b7280;
  --focus-ring: 0 0 0 3px rgba(239, 68, 68, .55);
  --focus-ring-light: 0 0 0 3px rgba(10, 15, 30, .45);   /* on the light sections */

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Anton", "Arial Narrow", system-ui, sans-serif;      /* headings */
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;        /* everything else */
  --font-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; /* odds, badges */
  --font-note: "Inter", system-ui, sans-serif;                          /* "18+ Australians only" */

  --fs-display: 120px;   /* hero, desktop */
  --fs-h1: 72px;
  --fs-h2: 48px;
  --fs-h3: 32px;
  --fs-h4: 24px;
  --fs-h5: 18px;
  --fs-body: 16px;
  --fs-body-sm: 15px;
  --fs-small: 14px;
  --fs-xs: 13px;
  --fs-2xs: 12px;
  --fs-3xs: 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;        /* the mockup's headings are 100% of the size */
  --lh-base: 1.5;       /* body copy: 16/24 in the mockup */
  --lh-copy: 1.6;       /* long legal copy, ours */
  --ls-wide: .08em;     /* uppercase eyebrows and buttons */

  /* ── 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-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;

  --radius-xs: 1px;     /* the mockup's hairline rounding on inputs */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 40px -10px rgba(0, 0, 0, .102);   /* the mockup's only shadow */

  /* ── Container: from the mockup's frames ─────────────────────────────── */
  --container: 1312px;        /* 1440 − 64 × 2 */
  --container-pad: 64px;      /* desktop */
  --container-pad-mobile: 20px;   /* mobile frame is 390 → content 350 */
  --section-pad-y: 96px;      /* light sections */
  --section-pad-y-dark: 64px; /* gradient sections */
  --section-pad-y-mobile: 48px;
  --header-h: 88px;           /* sticky header; anchors scroll clear of it */

  /* ── 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-overlay: 900;
  --z-modal: 1000;
}

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