/* Design tokens — the numbers from the mockup, named by role. * * Source: `lotto 3.fig`, parsed 2026-09-15 (fig-tokens.js → figma/INVENTORY.md). * Values are NOT rounded for tidiness: 13px text, 17px gaps and 0.082 alphas * stay as drawn. Anything the mockup does not have (states, focus ring, * motion, z-index) is marked "added". */ :root { /* ── Colour: surfaces (from the mockup) ──────────────────────────────── */ --color-bg: #0b0e14; /* page + header + footer */ --color-bg-deep: #06080c; /* utility bar, "need support" bands */ --color-bg-deeper: #090b0f; /* legal band inside footer */ --color-surface: #141923; /* cards, bet slip, forms */ --color-surface-2: #1d2432; /* inputs, odds buttons, nested rows */ --color-surface-3: #0e121a; /* preview panels inside a #141923 card */ --color-border: #293445; /* the border of everything (1095 strokes) */ --color-border-2: #38475a; /* inputs, secondary buttons */ --color-border-soft: #1e2736; /* row separators in dense tables */ /* ── Colour: text (from the mockup) ──────────────────────────────────── */ --color-text: #f0f4f8; /* primary text, card titles */ --color-text-strong: #ffffff; /* h1/h2, logo, button labels on dark */ --color-text-alt: #f0f5f7; /* headings on help / contact / deposit pages */ --color-text-2: #d1d9e3; /* secondary text (legal body) */ --color-muted: #8f9cae; /* descriptions, labels — most used text colour */ --color-dim: #627387; /* meta, timestamps, placeholders */ --color-on-brand: #0b0e14; /* text on green buttons */ /* ── Colour: accents (from the mockup) ───────────────────────────────── */ --color-brand: #00e676; /* green: CTAs, odds, active states */ --color-brand-tint: rgba(0, 230, 118, 0.102); /* eyebrow / pill backgrounds */ --color-brand-tint-2: rgba(0, 230, 118, 0.12); --color-danger: #ff4d4d; /* 18+ badge, Clear All, errors */ --color-danger-tint: rgba(255, 77, 77, 0.082); --color-danger-text: #ff6666; --color-help: #006d68; /* Gambling Help Online pill */ --color-help-text: #a8f0ec; --color-gold: #c4a46a; /* racing accent */ --color-gold-tint: rgba(196, 164, 106, 0.102); --color-overlay: rgba(6, 8, 12, 0.8); /* age gate / sheet backdrop */ --color-scrim: rgba(11, 14, 20, 0.7); /* hero photo overlay */ --color-scrim-card: rgba(20, 25, 35, 0.85); /* ── Colour: states (added — not in the mockup) ──────────────────────── */ --color-brand-hover: #33eb91; --color-brand-active: #00c765; --color-surface-hover: #1a2030; --color-surface-2-hover: #24304a; --color-danger-hover: #ff6b6b; --color-success: var(--color-brand); --color-error: var(--color-danger); --focus-ring: 0 0 0 3px rgba(0, 230, 118, 0.45); /* ── Typography: from the mockup ─────────────────────────────────────── */ --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; /* Bold 700 / ExtraBold 800 / SemiBold 600 */ --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; /* 400 / 500 / 600 / 700 / 800 */ --fs-h1: 48px; /* legal h1, Sora ExtraBold */ --fs-h1-sm: 36px; /* RG hero, mobile h1 */ --fs-h2: 32px; /* hero title */ --fs-h2-sm: 28px; --fs-h3: 24px; --fs-h4: 22px; /* section titles "Featured Upcoming Events" */ --fs-h5: 20px; --fs-h6: 18px; --fs-lead: 16px; --fs-body-lg: 15px; --fs-body: 14px; /* most body copy */ --fs-ui: 13px; /* the most used size: nav, odds, table cells */ --fs-small: 12px; --fs-tiny: 11px; /* eyebrows, meta */ --fs-micro: 10px; /* 18+ badge, "Debit only" */ --fs-nano: 9px; /* line-height goes in px per node, from the mockup (F5-rules). These are only for text whose length is not fixed (long legal copy, form help). */ --lh-tight: 1; --lh-snug: 1.3; --lh-base: 1.5; --lh-loose: 1.6; /* ── Space (auto-layout gaps/paddings from the mockup) ───────────────── */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; /* ── Shape, depth ────────────────────────────────────────────────────── */ --radius-xs: 4px; /* badges, eyebrows */ --radius-sm: 6px; /* buttons, inputs, odds */ --radius-md: 8px; /* pills, small cards */ --radius-lg: 12px; /* form cards, mobile cards */ --radius-xl: 16px; /* hero, bet slip, desktop cards */ --radius-pill: 100px; --shadow-sheet: 0 24px 48px 0 rgba(0, 0, 0, 0.5); /* bet-slip sheet */ --shadow-modal: 0 16px 32px 0 rgba(0, 0, 0, 0.627); /* age gate */ /* ── Container: from the frames (no layoutGrids in the file) ─────────── */ --page-pad: 48px; /* dashboard pages: 1440 − 2×48 = 1344 */ --page-pad-wide: 80px; /* legal/RG/help pages: 1440 − 2×80 = 1280 */ --page-pad-m: 16px; /* mobile: 390 − 2×16 = 358 */ --feed-w: 980px; /* main feed on dashboard pages */ --betslip-w: 340px; /* bet slip panel */ --dash-gap: 24px; /* feed ↔ bet slip */ --form-w: 640px; /* registration card */ --form-w-sm: 480px; /* login / verify card */ --form-w-md: 680px; /* contact / deposit-limit card */ --utility-h: 34px; --header-h: 64px; --utility-h-m: 51px; --header-h-m: 52px; /* ── Motion (added) ──────────────────────────────────────────────────── */ --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) ──────────────────────────────────────────────────── */ --z-sticky: 50; --z-header: 100; --z-betslip-bar: 200; --z-menu: 300; --z-sheet: 800; --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. mobile frame: 390px → mobile layout applies at (max-width: 1199px) desktop frame: 1440px → dashboard layout (feed + bet slip) from 1200px */