/* Design tokens — the numbers from the mockup, named by role.
 *
 * Source: «лотто 28.fig», parsed 2026-09-15 (figma/INVENTORY.md). Values are
 * not rounded: 22px from the mockup stays 22px. Anything the mockup does not
 * have (states, focus ring, motion) is marked «added by us».
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #0a0a0a;             /* page ground, header, dark sections */
  --color-bg-deep: #000000;        /* footer, mobile utility strip, menu bottom */
  --color-surface: #111111;        /* dark cards, inputs, bet slip body */
  --color-surface-2: #111015;      /* bet slip / dark panels, cool tint */
  --color-surface-3: #0b0810;      /* consent area in register */
  --color-cream: #f5f2e8;          /* light sections, primary text on dark */
  --color-cream-2: #f2f0eb;        /* alternating light sections (RG page) */
  --color-cream-3: #f4f3ef;        /* market rows on lime */
  --color-cream-4: #fbf9f3;        /* contact form card */
  --color-lime: #ccff00;           /* brand accent: buttons, marks, highlights */
  --color-lime-deep: #3d6600;      /* small text / dividers on lime */
  --color-lime-tint: #e8f5c8;      /* «pre-match result» pills */
  --color-orange: #cc3b00;         /* live / warning accent (2 uses) */
  --color-orange-stroke: #ff5a00;

  --color-text: #f5f2e8;           /* on dark ground */
  --color-text-dark: #0a0a0a;      /* on light / lime ground */
  --color-muted: #888888;          /* body copy on dark */
  --color-muted-2: #999999;        /* nav links, utility strip */
  --color-muted-3: #666666;        /* utility labels, payment note (mockup value; 3.4:1 on dark — kept by client decision: no design changes) */
  --color-muted-3-light: #666666;
  --color-muted-4: #555555;        /* footer brand blurb, kickers (mockup value) */
  --color-muted-5: #444444;        /* footer legal lines (mockup value) */
  --color-muted-6: #333333;        /* footer bottom line */
  --color-muted-cool: #6b6575;     /* secondary text in bet slip / dark panels */
  --color-muted-cool-dark: #6b6575;
  --color-muted-cool-2: #83808e;

  --color-border: #1f1f1f;         /* dividers on dark */
  --color-border-2: #26242e;       /* dividers in cool dark panels */
  --color-border-3: #333333;       /* payment divider, ghost buttons */
  --color-border-light: #c8c5bc;   /* dividers / outlines on cream */

  /* ── Colour: added by us (not in the mockup) ─────────────────────────── */
  --color-lime-hover: #d9ff33;
  --color-lime-active: #b8e600;
  --color-surface-hover: #181818;
  --color-cream-hover: #ebe8de;
  --color-error: #cc3b00;          /* reuse the mockup's orange for form errors */
  --color-error-light: #ff8a5c;    /* error text on dark ground, 4.5:1 */
  --color-success: #3d6600;
  --color-success-light: #a3e635;
  --focus-ring: 0 0 0 3px rgba(204, 255, 0, .55);
  --overlay: rgba(0, 0, 0, .78);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, sans-serif;     /* mobile contact form copy */
  --font-sans-2: "DM Sans", system-ui, sans-serif;           /* mobile RG page copy */
  --font-sans-3: "Manrope", system-ui, sans-serif;           /* mobile modal copy */
  /* scale: 8 9 10 11 12 13 14 15 16 18 20 22 24 28 32 36 38 40 44 48 52 56 64 68 72 96 120 140 200 220 */
  --fs-display: 96px;    /* hero h1 desktop, lh 86px */
  --fs-h1: 72px;         /* modal titles, lh 64px */
  --fs-h2: 68px;         /* section titles desktop, lh 60px */
  --fs-h2-m: 40px;       /* section titles mobile, lh 36px */
  --fs-h3: 28px;         /* brand wordmark, card titles */
  --fs-h4: 20px;
  --fs-lead: 16px;       /* lh 26px */
  --fs-body: 14px;       /* lh 22px */
  --fs-small: 13px;      /* nav, labels; lh 18–20px */
  --fs-caption: 12px;
  --fs-micro: 11px;
  --fs-nano: 10px;       /* utility strip */
  --fs-watermark: 220px; /* background wordmarks in modals, opacity .06 */
  --lh-tight: 1;         /* the mockup sets 100% on nearly every label */
  --lh-base: 1.57;       /* 14/22 — only for text whose length is not fixed */
  --tracking-label: .12em;   /* uppercase eyebrows / nav (1.5px @ 10–13px) */
  --tracking-tight: -.02em;  /* display headings */

  /* ── 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-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-100: 100px;
  --radius-xs: 1px;
  --radius-sm: 2px;      /* buttons, pills, cards — the house radius */
  --radius-md: 4px;      /* modals, consent area */
  --radius-lg: 6px;
  --radius-xl: 12px;
  --shadow-card: 0 10px 24px -8px rgba(0, 0, 0, .4);
  --shadow-photo: 10px 18px 34px -12px rgba(0, 0, 0, .5);
  --shadow-photo-l: -10px 18px 36px -12px rgba(0, 0, 0, .5);
  --shadow-photo-s: 6px 10px 20px -4px rgba(0, 0, 0, .5);

  /* ── Container: from the mockup's frames ─────────────────────────────── */
  --container: 1320px;     /* 1440 − 2×60 */
  --container-pad: 60px;
  --container-pad-wide: 80px;  /* RG page / legal document sections use 80 */
  --container-pad-m: 16px;     /* 390 frames */
  --header-h: 104px;           /* utility 32 + nav 72 */
  --header-h-m: 102px;         /* utility 46 + nav 56 */

  /* ── 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 ──────────────────────────────────────────────────────────── */
  --z-header: 100;
  --z-slip: 50;
  --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 in step with it.
   --bp-mobile: 390px   (mockup mobile frame)
   --bp-switch: 1199px  (below — mobile layout)
   --bp-desktop: 1440px (mockup desktop frame) */