/* Design tokens — the numbers from the mockup, named by role. * * Source: "лотто 20.fig", parsed 2026-09-16 (fig-pull.js), values 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. */ :root { /* ── Colour: from the mockup ─────────────────────────────────────────── */ --color-bg: #080a09; /* page background (341×) */ --color-bg-deep: #0c100e; /* utility bar, mobile footer (107×) */ --color-surface: #111512; /* nav, cards, payment strip (370×) */ --color-surface-2: #111311; /* inner page background (134×) */ --color-surface-3: #1a1d1b; /* page title area, alt rows (90×) */ --color-surface-4: #1c1f1d; /* nested card (35×) */ --color-band: #18201b; /* safety band behind the RG warning (44×) */ --color-chip: #2a2f26; /* chips and tags (70×) */ --color-text: #f4f7f5; /* primary text on dark (562×) */ --color-text-alt: #e8e6e0; /* warm variant used in editorial copy (455×) */ --color-muted: #8e9991; /* secondary text (1192×) — 5.9:1 on --color-bg */ --color-muted-2: #9a9a9a; /* secondary text, neutral grey (471×) */ --color-faint: #555e57; /* disabled / dividers in text (10×) */ --color-brand: #d4ff00; /* lime accent (746×) */ --color-brand-2: #c8ff00; /* second lime, 3 units apart — see note (531×) */ --color-brand-deep: #a8ef00; /* pressed lime (19×) */ --color-border: #252e28; /* default stroke (1206×) */ --color-border-2: #3a4a3a; /* lighter stroke on bands (38×) */ --color-danger: #ff3b30; /* 18+ badge, form errors (43×) */ --color-on-brand: #080a09; /* text on a lime fill */ --color-light: #ffffff; --color-light-2: #f7f7f0; --gradient-fade-x: linear-gradient(90deg, rgba(8, 10, 9, .8) 0%, rgba(8, 10, 9, 0) 50%, rgba(8, 10, 9, .8) 100%); --overlay-scrim: rgba(8, 10, 9, .941); /* age gate / login backdrop */ --overlay-scrim-deep: rgba(8, 10, 9, .98); /* registration / cookie backdrop */ /* ── Colour: added by us (not in the mockup) ─────────────────────────── */ --color-brand-hover: color-mix(in srgb, var(--color-brand) 88%, #ffffff); --color-brand-active: var(--color-brand-deep); --color-surface-hover: #181b19; --color-success: #a8ef00; --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-brand); /* ── Typography: from the mockup ─────────────────────────────────────── */ --font-display: "Unbounded", "Arial Black", system-ui, sans-serif; /* headings, labels, buttons */ --font-body: "Geist", system-ui, -apple-system, sans-serif; /* body copy, legal */ --font-alt: "DM Sans", system-ui, sans-serif; /* numeric/odds detail */ --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif; /* stadium/overlay captions */ --fs-display: 130px; /* oversized brand word in hero overlays */ --fs-h1: 64px; /* page hero heading (desktop) */ --fs-h1-m: 32px; /* same heading on the 390 frame */ --fs-h2: 32px; /* section heading */ --fs-h2-m: 22px; --fs-h3: 28px; --fs-h4: 24px; --fs-h5: 20px; --fs-lead: 18px; --fs-body: 16px; --fs-base: 14px; /* card titles, dense copy */ --fs-sm: 13px; /* most used body size in the mockup (745×) */ --fs-xs: 12px; /* nav, footer links (711×) */ --fs-2xs: 11px; /* legal lines (605×) */ --fs-3xs: 10px; /* eyebrows, buttons, labels (583×) */ --fs-4xs: 9px; /* utility bar, micro labels (296×) */ /* The mockup sets line-height to 100% on almost every heading and label, and to on body copy. Per-node values go in the section CSS in px; these two are only for text whose length is not fixed. */ --lh-tight: 1; --lh-base: 1.55; --ls-wide: .08em; /* uppercase eyebrows and labels */ --ls-wider: .14em; /* ── Space, shape, depth ─────────────────────────────────────────────── */ --space-1: 1px; --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; --space-80: 80px; --radius-xs: 1px; --radius-sm: 2px; --radius-md: 4px; --radius-pill: 10px; --shadow-card: 0 16px 40px rgba(0, 0, 0, .502); --shadow-modal: 0 24px 48px rgba(0, 0, 0, .702); --shadow-drop: 0 12px 24px rgba(0, 0, 0, .8); /* ── Container: the mockup has no layoutGrids; the container is the frame width minus the section padding (1440 − 2×48 = 1344). ───────────── */ --container: 1344px; --container-pad: 48px; --container-pad-m: 16px; --section-pad-y: 80px; --section-pad-y-m: 32px; /* ── 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; } @media (max-width: 1199px) { :root { --container-pad: var(--container-pad-m); --section-pad-y: var(--section-pad-y-m); } } /* 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) --bp-desktop: 1440px (mockup desktop frame) --bp-switch: 1199px (below this the mobile layout applies) Notes on what was merged and what was not: · #d4ff00 and #c8ff00 are three units apart and both appear hundreds of times — they are NOT merged: #d4ff00 is the accent on dark, #c8ff00 is the button fill. #c7ff00 (3×) is a stray of #c8ff00 and is folded into it. · #111311 / #111512 differ by two units but sit on different pages (inner pages vs nav/cards); kept apart so box diffs stay honest. · #9a9a9a is kept next to #8e9991: the first is a neutral grey used in legal blocks, the second a green-tinted grey used in body copy. */