/* BetUS home design tokens — reconciled to Aurora (@ppt/aurora@0.0.165). * Sources (design-system repo @ main = aurora 0.0.165): * packages/aurora/src/vanilla-theme.css — token names (framework-agnostic layer) + radius/text scales * tokens/aurora/theme-packages/base-rounded-base-base/css/theme.css — the BetUS base/sportsbook * brand layer (@ppt/aurora-theme-base / -sportsbook); its values win where it overrides vanilla. * Light mode only (the homepage experiment has no dark arm). Omitted as unused on the homepage: * --color-cs-* / --color-chart-* (casino game UI, charts), nav-* / sb-* / logo-* / artwork-* * (site-chrome tokens), and Aurora's --font-display (Kommissar — the homepage display face is * Nexa = --font-heading). * * FLAGGED — Figma values with NO matching Aurora token (DS candidates; kept verbatim, not renamed): * --c-gold #b79200 deep brand gold; nearest --color-tone-gold hsl(46 68% 47%) ≈ #c9a326 is visibly lighter * --c-ink #1d1d1b near-black headline ink; Aurora's darkest fg --color-foreground-high = #282e38 * --c-blue-100 #e0f3ff pale blue tint; nearest --color-informative-muted hsl(204 100% 97%) * --fs-13 13px small meta text; Aurora jumps --text-xs 12px → --text-sm 14px * --sp-* spacing scale vanilla-theme.css exposes no spacing tokens (DS apps get spacing from Tailwind) * --shadow / --shadow-lg no shadow tokens in Aurora * --fs-h / --maxw page-specific (hero type clamp, content max-width) * NEAR-MATCH mappings (value snapped to Aurora; tiny visual delta vs the old hand-picked hex): * --c-line #e5e5e5 → --color-border-low hsl(218 31% 90%) (neutral → cool-gray hairline) * --c-muted-2 #929eb4 → --color-fill-high hsl(219 18% 62%) */ /* ---- Brand webfonts (self-hosted WOFF2 in /fonts/home/) ---- * Nexa: WOFF2 converted from the licensed OTFs at nx.betuscdn.com/cdn/libs/fonts/Nexa/ (that CDN * only serves OTF). Weight ↔ file mapping follows CDN/shared/styles/scss/fonts/_nexa.scss. * Gustavo: copied from design-system cdn/fonts/betus/Gustavo/ (already WOFF2; not on nx.betuscdn.com). * Declarations are lazy — a weight only downloads if rendered text actually uses it. */ @font-face { font-family: Nexa; src: url("../../fonts/home/nexa-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Nexa; src: url("../../fonts/home/nexa-bold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Nexa; src: url("../../fonts/home/nexa-extrabold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Nexa; src: url("../../fonts/home/nexa-heavy.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: Nexa; src: url("../../fonts/home/nexa-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: Gustavo; src: url("../../fonts/home/gustavo-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Gustavo; src: url("../../fonts/home/gustavo-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Gustavo; src: url("../../fonts/home/gustavo-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Gustavo; src: url("../../fonts/home/gustavo-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---- Aurora fonts (BetUS theme: --heading Nexa, --body Roboto) + system fallbacks ---- */ --font-heading: "Nexa", "Segoe UI", system-ui, sans-serif; --font-body: "Roboto", system-ui, -apple-system, sans-serif; /* Gustavo is the Figma hero/accent face. The BetUS base theme has no accent-font token (the newbase token set uses Gustavo as its --font-heading) — FLAG: DS candidate --font-accent. */ --font-accent: "Gustavo", "Nexa", sans-serif; /* ---- Aurora radius scale ---- */ --radius-none: 0rem; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --radius-full: 1000rem; --radius-lgx: 0.625rem; --radius-action-1: 1000rem; --radius-action-2: 0.5rem; /* ---- Aurora text scale ---- */ --text-3xs: 0.5rem; --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.75rem; --text-4xl: 2rem; --text-5xl: 2.5rem; --text-6xl: 3rem; --text-7xl: 3.5rem; --text-8xl: 4rem; --text-9xl: 4.5rem; --text-10xl: 5rem; /* ---- Aurora colors (vanilla names, BetUS base-theme values) ---- */ --color-accent: hsl(218 17% 19%); --color-accent-foreground: hsl(0 0% 100%); --color-alpha-0: hsl(0 0% 50% / 0%); --color-alpha-10: hsl(215 61% 15% / 10%); --color-alpha-2-5: hsl(215 61% 15% / 2%); --color-alpha-20: hsl(215 61% 15% / 20%); --color-alpha-30: hsl(215 61% 15% / 30%); --color-alpha-40: hsl(215 61% 15% / 40%); --color-alpha-5: hsl(215 61% 15% / 5%); --color-alpha-50: hsl(215 61% 15% / 50%); --color-alpha-60: hsl(215 61% 15% / 60%); --color-alpha-7-5: hsl(215 61% 15% / 8%); --color-alpha-70: hsl(215 61% 15% / 70%); --color-alpha-80: hsl(215 61% 15% / 80%); --color-alpha-90: hsl(215 61% 15% / 90%); --color-alpha-backdrop: hsl(0 0% 0% / 75%); --color-alpha-overlay: hsl(0 0% 100% / 60%); --color-background-1: hsl(214 37% 96%); --color-background-2: hsl(180 100% 100%); --color-border-high: hsl(218 17% 19%); --color-border-low: hsl(218 31% 90%); --color-border-medium: hsl(218 20% 68%); --color-brand: hsl(219 72% 20%); --color-brand-foreground: hsl(180 100% 100%); --color-card-1: hsl(180 100% 100%); --color-card-2: hsl(210 40% 98%); --color-card-3: hsl(214 37% 96%); --color-card-border: hsl(215 33% 93%); --color-card-solid: hsl(180 100% 100%); --color-card-x: hsl(0 76% 95% / 50%); --color-card-x-border: hsl(0 100% 42% / 50%); --color-cta-1: hsl(0 100% 46%); --color-cta-1-foreground: hsl(0 0% 100%); --color-cta-1-border: hsl(0 100% 46%); --color-cta-2: hsl(45 100% 51%); --color-cta-2-foreground: hsl(219 72% 20%); --color-cta-2-border: hsl(45 100% 51%); --color-cta-3: hsl(0 0% 50% / 0%); --color-cta-3-foreground: hsl(218 17% 19%); --color-cta-3-border: hsl(211 100% 32%); --color-inv-cta-1: hsl(0 100% 46%); --color-inv-cta-1-foreground: hsl(0 0% 100%); --color-inv-cta-1-border: hsl(0 100% 46%); --color-inv-cta-2: hsl(45 100% 51%); --color-inv-cta-2-foreground: hsl(218 17% 19%); --color-inv-cta-2-border: hsl(45 100% 51%); --color-inv-cta-3: hsl(0 0% 100% / 18%); --color-inv-cta-3-foreground: hsl(180 100% 100%); --color-inv-cta-3-border: hsl(207 100% 76%); --color-danger: hsl(0 100% 46%); --color-danger-foreground: hsl(0 0% 100%); --color-danger-muted: hsl(13 100% 98%); --color-danger-text: hsl(0 100% 37%); --color-fill-high: hsl(219 18% 62%); --color-fill-low: hsl(214 37% 96%); --color-fill-medium: hsl(215 33% 93%); --color-focus: hsl(208 100% 69%); --color-foreground-high: hsl(218 17% 19%); --color-foreground-low: hsl(220 16% 57%); --color-foreground-medium: hsl(219 15% 40%); --color-informative: hsl(211 100% 50%); --color-informative-foreground: hsl(0 0% 100%); --color-informative-muted: hsl(204 100% 97%); --color-inv-accent: hsl(210 40% 98%); --color-inv-accent-foreground: hsl(218 17% 19%); --color-inv-alpha-0: hsl(0 0% 50% / 0%); --color-inv-alpha-10: hsl(0 0% 100% / 10%); --color-inv-alpha-2-5: hsl(0 0% 100% / 2%); --color-inv-alpha-20: hsl(0 0% 100% / 20%); --color-inv-alpha-30: hsl(0 0% 100% / 30%); --color-inv-alpha-40: hsl(0 0% 100% / 40%); --color-inv-alpha-5: hsl(0 0% 100% / 5%); --color-inv-alpha-50: hsl(0 0% 100% / 50%); --color-inv-alpha-60: hsl(0 0% 100% / 60%); --color-inv-alpha-7-5: hsl(0 0% 100% / 8%); --color-inv-alpha-70: hsl(0 0% 100% / 70%); --color-inv-alpha-80: hsl(0 0% 100% / 80%); --color-inv-alpha-90: hsl(0 0% 100% / 90%); --color-inv-alpha-backdrop: hsl(0 0% 0% / 75%); --color-inv-alpha-overlay: hsl(215 54% 7% / 60%); --color-inv-background-1: hsl(211 100% 5%); --color-inv-background-2: hsl(211 100% 10%); --color-inv-border-high: hsl(210 40% 98%); --color-inv-border-low: hsl(219 18% 62%); --color-inv-border-medium: hsl(219 21% 74%); --color-inv-brand: hsl(220 60% 95%); --color-inv-brand-foreground: hsl(218 17% 19%); --color-inv-card-1: hsl(211 100% 10%); --color-inv-card-2: hsl(211 100% 15%); --color-inv-card-3: hsl(211 100% 21%); --color-inv-card-border: hsl(219 28% 18%); --color-inv-card-solid: hsl(211 100% 10%); --color-inv-card-x: hsl(0 80% 14% / 50%); --color-inv-card-x-border: hsl(0 100% 26% / 50%); --color-inv-chart-1: hsl(245 99% 68%); --color-inv-chart-1-foreground: hsl(180 100% 100%); --color-inv-danger: hsl(0 100% 76%); --color-inv-danger-foreground: hsl(218 17% 19%); --color-inv-danger-muted: hsl(0 100% 26%); --color-inv-danger-text: hsl(1 100% 89%); --color-inv-fill-high: hsl(219 16% 35%); --color-inv-fill-low: hsl(218 17% 19%); --color-inv-fill-medium: hsl(219 16% 24%); --color-inv-focus: hsl(206 100% 82%); --color-inv-foreground-high: hsl(0 0% 100%); --color-inv-foreground-low: hsl(218 20% 68%); --color-inv-foreground-medium: hsl(218 28% 86%); --color-inv-informative: hsl(206 100% 82%); --color-inv-informative-foreground: hsl(218 17% 19%); --color-inv-informative-muted: hsl(211 100% 15%); --color-inv-link: hsl(206 100% 82%); --color-inv-link-hover: hsl(208 100% 69%); --color-inv-link-visited: hsl(260 70% 82%); --color-inv-primary: hsl(211 100% 50%); --color-inv-primary-foreground: hsl(0 0% 100%); --color-inv-primary-muted: hsl(211 100% 26%); --color-inv-primary-text: hsl(206 100% 82%); --color-inv-success: hsl(98 77% 66%); --color-inv-success-foreground: hsl(218 17% 19%); --color-inv-success-muted: hsl(98 100% 22%); --color-inv-success-text: hsl(98 77% 66%); --color-inv-warning: hsl(55 100% 67%); --color-inv-warning-foreground: hsl(218 17% 19%); --color-inv-warning-muted: hsl(54 97% 25%); --color-inv-warning-text: hsl(55 100% 67%); --color-link: hsl(211 100% 46%); --color-link-hover: hsl(210 100% 56%); --color-link-visited: hsl(264 97% 62%); --color-primary: hsl(211 100% 50%); --color-primary-foreground: hsl(0 0% 100%); --color-primary-muted: hsl(204 100% 97%); --color-primary-text: hsl(211 100% 46%); --color-success: hsl(99 95% 39%); --color-success-foreground: hsl(180 100% 100%); --color-success-muted: hsl(96 100% 97%); --color-success-text: hsl(98 100% 27%); --color-tone-blue: hsl(210 100% 56%); --color-tone-blue-foreground: hsl(180 100% 100%); --color-tone-flipped: hsl(0 0% 0%); --color-tone-flipped-foreground: hsl(180 100% 100%); --color-tone-gray: hsl(218 31% 90%); --color-tone-gray-foreground: hsl(218 17% 19%); --color-tone-green: hsl(99 100% 35%); --color-tone-green-foreground: hsl(180 100% 100%); --color-tone-navy: hsl(219 50% 47%); --color-tone-navy-foreground: hsl(180 100% 100%); --color-tone-orange: hsl(29 100% 45%); --color-tone-orange-foreground: hsl(180 100% 100%); --color-tone-pink: hsl(313 100% 45%); --color-tone-pink-foreground: hsl(180 100% 100%); --color-tone-purple: hsl(260 48% 54%); --color-tone-purple-foreground: hsl(180 100% 100%); --color-tone-red: hsl(0 100% 46%); --color-tone-red-foreground: hsl(180 100% 100%); --color-tone-yellow: hsl(54 92% 54%); --color-tone-yellow-foreground: hsl(218 17% 19%); --color-warning: hsl(45 100% 51%); --color-warning-foreground: hsl(218 17% 19%); --color-warning-muted: hsl(60 100% 97%); --color-warning-text: hsl(34 98% 40%); --color-primary-hover: hsl(211 100% 60%); --color-primary-active: hsl(211 100% 70%); --color-inv-primary-hover: hsl(211 100% 60%); --color-inv-primary-active: hsl(211 100% 70%); --color-fill-medium-hover: hsl(215 33% 83%); --color-fill-medium-active: hsl(215 33% 73%); --color-inv-fill-medium-hover: hsl(219 16% 34%); --color-inv-fill-medium-active: hsl(219 16% 44%); --color-transparent-hover: hsl(214 37% 4% / 10%); --color-transparent-active: hsl(214 37% 4% / 20%); --color-inv-transparent-hover: hsl(211 100% 95% / 10%); --color-inv-transparent-active: hsl(211 100% 95% / 20%); --color-fill-low-hover: hsl(214 37% 86%); --color-fill-low-active: hsl(214 37% 76%); --color-inv-fill-low-hover: hsl(218 17% 29%); --color-inv-fill-low-active: hsl(218 17% 39%); --color-primary-muted-hover: hsl(204 100% 87%); --color-primary-muted-active: hsl(204 100% 77%); --color-inv-primary-muted-hover: hsl(211 100% 36%); --color-inv-primary-muted-active: hsl(211 100% 46%); --color-foreground-high-hover: hsl(218 17% 34%); --color-foreground-high-active: hsl(218 17% 39%); --color-inv-foreground-high-hover: hsl(211 100% 77%); --color-inv-foreground-high-active: hsl(0 0% 80%); --color-accent-hover: hsl(218 17% 29%); --color-accent-active: hsl(218 17% 39%); --color-inv-accent-hover: hsl(210 40% 88%); --color-inv-accent-active: hsl(210 40% 78%); --color-cta-1-hover: hsl(0 100% 56%); --color-cta-1-active: hsl(0 100% 66%); --color-inv-cta-1-hover: hsl(0 100% 56%); --color-inv-cta-1-active: hsl(0 100% 66%); --color-cta-2-hover: hsl(45 100% 61%); --color-cta-2-active: hsl(45 100% 71%); --color-inv-cta-2-hover: hsl(45 100% 61%); --color-inv-cta-2-active: hsl(45 100% 71%); --color-cta-3-hover: hsl(0 0% 60%); --color-cta-3-active: hsl(0 0% 70%); --color-inv-cta-3-hover: hsl(0 0% 90%); --color-inv-cta-3-active: hsl(0 0% 80%); --color-tone-gold: hsl(46 68% 47%); --color-tone-gold-foreground: hsl(218 17% 19%); --color-tone-silver: hsl(218 11% 66%); --color-tone-silver-foreground: hsl(218 17% 19%); --color-tone-bronze: hsl(23 43% 46%); --color-tone-bronze-foreground: hsl(180 100% 100%); /* ================================================================ Legacy aliases — pre-reconciliation names still referenced by app.css / concept-b.css. Each points at the Aurora token above (or is FLAGGED unmapped). DELETE each alias as its component is rebuilt hi-fi against Figma with Aurora names directly. ================================================================ */ --c-gold: #b79200; /* FLAGGED unmapped (see header) */ --c-gold-bright: var(--color-cta-2); /* #ffc107 ≡ cta-2 (≡ warning) */ --c-ink: #1d1d1b; /* FLAGGED unmapped (see header) */ --c-navy: var(--color-brand); /* #0e2857 exact */ --c-slate: var(--color-foreground-high); /* #282e38 exact */ --c-blue: var(--color-primary); /* #007bff exact */ --c-blue-600: var(--color-link); /* #0072eb exact (≡ primary-text) */ --c-blue-100: #e0f3ff; /* FLAGGED unmapped (see header) */ --c-blue-200: var(--color-inv-informative); /* #a4d8ff exact (≡ inv-link/inv-focus) */ --c-white: #ffffff; --c-bg: var(--color-background-1); /* page ground — pixel-sampled from the Figma render (rgb 242 245 249 = background-1 exactly, 2026-07-09); earlier inv-foreground-medium reading was a misattribution. */ --c-line: var(--color-border-low); /* NEAR match (see header) */ --c-muted: var(--color-foreground-medium); /* #576276 exact */ --c-muted-2: var(--color-fill-high); /* NEAR match (see header) */ --font-display: var(--font-heading); /* legacy name for the display face (Nexa) */ --fs-10: var(--text-2xs); --fs-12: var(--text-xs); --fs-13: 13px; /* FLAGGED no Aurora size — NB was referenced but never defined before this reconciliation (those font-size decls silently fell back to inherited) */ --fs-14: var(--text-sm); --fs-16: var(--text-base); --fs-18: var(--text-lg); --fs-20: var(--text-xl); --fs-h: clamp(26px, 5vw, 44px); /* FLAGGED page-specific hero clamp */ /* FLAGGED: no spacing tokens in Aurora's vanilla layer — local scale kept as-is */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --radius: var(--radius-xl); /* 12px exact */ --radius-pill: var(--radius-full); /* legacy --radius-sm (8px) removed: it collided with Aurora --radius-sm (4px). All 7 usages in app.css / concept-b.css now use --radius-lg (8px) directly. */ --shadow: 0 2px 8px rgba(16, 24, 40, 0.08); /* FLAGGED no Aurora shadow tokens */ --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12); /* FLAGGED no Aurora shadow tokens */ --maxw: 1424px; /* page content width = the Figma desktop canvas (Sagar, 2026-07-13: the redesign carries its own wrapper, wider than the legacy site chrome) */ }