/* ============================================================================= bust.fun — DESIGN TOKENS (SYNTHWAVE foundation) ----------------------------------------------------------------------------- The single source of truth for the visual language: a dark, neon, high-energy crypto-casino aesthetic. Retro-futurism / synthwave — neon purple + rose action over deep indigo, with a faint geometric grid and CRT scanline. Every- thing in styles.css consumes these custom properties — never hard-code a color, radius, shadow, duration or z-index in a component; reach for a token. Layers, top to bottom: 1. Palette — raw surface / line / text / brand / semantic colors 2. Type scale — font stacks (self-hosted Fredoka + Nunito), sizes 3. Spacing/radii — 4px-based rhythm + corner radii 4. Elevation/glow — drop shadows + neon glows (the "juice") 5. Synthwave FX — neon glow, grid, scanline overlay tokens 6. Motion — durations + easings 7. Z-index ladder — stacking order, named 8. Light variant — optional [data-theme="light"] override (dark is primary) No build step, no preprocessor: plain CSS custom properties. No live CDN — fonts are self-hosted woff2 in /fonts (CLAUDE.md inv-7); nothing is fetched from a third party at runtime. TOKEN NAMES ARE A CONTRACT. styles.css + later squads consume these names; this retune changes VALUES (mint/teal -> synthwave purple/rose), never names. ========================================================================== */ /* ----------------------------------------------------------------------------- SELF-HOSTED FONTS (woff2, latin subset, font-display: swap) Fredoka + Nunito ship as variable-weight latin subsets, so a single woff2 per family covers every weight we request; we still declare per-weight faces so the browser maps font-weight correctly without synthetic bolding. -------------------------------------------------------------------------- */ @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/fredoka-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/fredoka-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/fredoka-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ----------------------------------------------------------------------------- METRIC-ADJUSTED FALLBACK FACES (H1 — eliminate the FOUT reflow / CLS) ----------------------------------------------------------------------------- `font-display: swap` paints a fallback face first, then SWAPS to the web font on load. If the fallback's line box (cap/x-height, advance width) differs from the web font, EVERY heading / payout figure / balance pill RE-FLOWS at swap time — visible jank + layout shift on the first paint of each route. The fix is a sized-down LOCAL fallback whose metrics MATCH the real face, declared as its own family and placed FIRST in the --font-display / --font-body stacks: the browser renders THIS during swap, so the glyphs already occupy the web font's footprint and the swap is metric-for-metric silent (no reflow). Overrides are tuned per pairing (Fredoka ≈ Trebuchet MS; Nunito ≈ Segoe/system grotesk): size-adjust scales the local glyphs to the web font's advance/x-height; ascent/descent/line-gap-override pin the line box so leading never shifts. These are presentation-only and add NO network request (the fallback is a system font). A sibling agent adds for the woff2 in index.html. */ @font-face { font-family: "Fredoka Fallback"; src: local("Trebuchet MS"), local("Segoe UI"), local("Arial"); size-adjust: 104%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; } @font-face { font-family: "Nunito Fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 100%; ascent-override: 101%; descent-override: 35%; line-gap-override: 0%; } :root { color-scheme: dark; /* ---- Compatibility aliases (UI/UX scan-report 06: "phantom tokens") ---- A handful of stylesheets (affiliate/styles/admin/tips) still reference an abandoned second naming scheme. Without these aliases `--border`/`--radius`/`--bg-2` resolve to NOTHING (no fallback), so those borders lose their color, those radii go sharp, and those backgrounds go transparent (e.g. the Fairness button). Map them to the canonical tokens (resolved lazily, so the live theme override still wins). */ --border: var(--line-2); --radius: var(--r-md); --radius-2: var(--r-md); --bg-2: var(--surface-2); --ok: var(--win, #34d399); /* =========================================================================== 1. PALETTE — synthwave: neon purple + rose action over deep indigo. All AA ratios below verified against bg #0F0F23 (and raised surfaces). ======================================================================== */ /* ---- surfaces: page backdrop -> raised, darkest to lightest ---- */ --bg: #0f0f23; /* page backdrop — deep indigo */ --bg-1: #0c0c1d; /* under-cards / input wells (slightly darker well) */ --surface: #1a1a33; /* card — a touch lighter than bg */ --surface-2: #15152b; /* subcard / inset */ --surface-3: #222244; /* hover / raised control */ --surface-4: #2b2b52; /* highest raised (active chip, popover) */ --scrim: rgba(7, 7, 18, .74); /* modal/sheet backdrop */ /* ---- hairlines / borders (violet-tinted) ---- */ --line: #2a2150; /* default border */ --line-2: #3a2d6e; /* stronger border (controls) */ --line-3: #4c1d95; /* hover / emphasis border — synthwave purple */ /* ---- text (cool slate; fg 15.3:1 on bg) ---- */ --fg: #e2e8f0; /* primary — 15.31:1 on bg */ --fg-dim: #c4cbdb; /* secondary — 11.7:1 on bg */ --muted: #9aa3b8; /* tertiary/labels— 7.46:1 on bg, 6.44:1 on surface */ /* P2-05 (a11y): lighter muted variant for muted labels on lighter ELEVATED surfaces (chip/seg/stat bgs), so they keep AA 4.5:1 where the base --muted would dip below it. Backstop here; the active neon-noir reskin overrides it (and is where the elevated surfaces are lightest). */ --muted-2: #b6c0d2; /* elevated-surface muted (synthwave backstop) */ --faint: #6f7894; /* quaternary/placeholders — 3.8:1 (non-text deco) */ /* alias the plan's "muted surface" + explicit muted-text name without breaking the existing --muted text token; later squads may use these. */ --muted-surface: #27273b; /* faint raised muted block (synthwave) */ --text-muted: #9aa3b8; /* explicit alias of --muted (readable label) */ /* ---- brand: primary neon purple ---- */ --brand: #7c3aed; /* primary */ --brand-2: #6d28d9; /* gradient foot / strong / hover */ --brand-ink: #ffffff; /* readable text on a brand fill — 5.70:1 */ --brand-soft: rgba(124, 58, 237, .16); /* tinted fills */ --brand-glow: rgba(124, 58, 237, .50); /* neon glow */ /* explicit primary aliases (stable names for later squads) */ --primary: #7c3aed; --primary-strong: #6d28d9; --primary-hover: #8b5cf6; /* ---- secondary accent: lighter neon violet (limbo / crash flavor) ---- */ --violet: #a78bfa; /* secondary — 6.93:1 on bg */ --violet-2: #8b5cf6; --violet-soft: rgba(167, 139, 250, .16); --violet-glow: rgba(167, 139, 250, .45); --secondary: #a78bfa; /* explicit alias */ /* ---- CTA / action accent: rose ---- */ --accent: #f43f5e; /* rose CTA */ --accent-2: #e11d48; /* rose foot / hover */ --accent-ink: #0f0f23; /* text on rose fill — near-black, 5.14:1 (white on rose is only 3.67:1 -> fails) */ --accent-soft: rgba(244, 63, 94, .16); --accent-glow: rgba(244, 63, 94, .50); /* ---- tertiary accent: neon cyan (info / live) ---- */ --cyan: #38e0ff; --cyan-glow: rgba(56, 224, 255, .42); /* ---- semantic: win / loss / neutral / warn / info ---- */ --win: #34f5c5; /* neon green/teal — 13.49:1 on bg */ --win-2: #15d6a6; --win-ink: #04140f; --win-soft: rgba(52, 245, 197, .12); --win-glow: rgba(52, 245, 197, .45); --lose: #ef4444; /* destructive red — 5.01:1 on bg */ --lose-2: #dc2626; --lose-soft: rgba(239, 68, 68, .12); --lose-glow: rgba(239, 68, 68, .42); /* destructive alias (stable name) — same as lose */ --destructive: #ef4444; --destructive-ink: #ffffff; /* 3.76:1 large-text only; use sparingly */ --neutral: #9aa3b8; /* "push" / no-change */ --warn: #ffb84d; /* amber — 10.6:1 on bg */ --warn-soft: rgba(255, 184, 77, .12); --warn-glow: rgba(255, 184, 77, .42); --info: #38e0ff; /* cyan info — 11.0:1 on bg */ --gold: #ffcf5c; /* 12.88:1 on bg */ --gold-2: #e6b23e; --gold-glow: rgba(255, 207, 92, .38); /* Badge/medal TIER metals + gems. Tokenized so the profile achievement tracks (badges.js) AND the chat tier chips (10-rewards-community.css) reference a variable instead of literal hex — one canonical color per tier, no cross-surface drift. `--tier-gold` aliases `--gold` so the full ladder is nameable. Any new tier surface MUST use these + must be mirrored into every theme file (peer contract, guarded by packages/shared/test/design-token-peer-drift.test.ts). */ --tier-bronze: #cd7f32; --tier-silver: #c0c0c0; --tier-gold: var(--gold); --tier-platinum: #67e8f9; --tier-diamond: #7dd3fc; --tier-ruby: #fb7185; --tier-emerald: #34d399; /* =========================================================================== 2. TYPE SCALE — self-hosted Fredoka (display/numbers) + Nunito (body). --font-sans stays the body default (now Nunito) so existing rules that reference it pick up the new face; --font-display is the playful display. ======================================================================== */ /* The metric-adjusted "* Fallback" alias sits FIRST so it renders during the font-display: swap window with the web font's exact metrics — the real face ("Fredoka" / "Nunito") follows and swaps in silently (no reflow / CLS). */ --font-display: "Fredoka", "Fredoka Fallback", "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Nunito", "Nunito Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-sans: var(--font-body); --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; --fs-display: 56px; /* crash multiplier / hero numbers */ --fs-xxl: 34px; /* big balance */ --fs-xl: 22px; /* page / payout */ --fs-lg: 17px; /* section heads, stats */ --fs-md: 14px; /* body / controls (base) */ --fs-sm: 13px; /* secondary text */ --fs-xs: 11px; /* labels / badges */ --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 700; /* Fredoka tops out at 700; map "black" -> 700 */ --lh-tight: 1.1; --lh-base: 1.5; --tracking-cap: .06em; /* uppercase label tracking */ /* =========================================================================== 3. SPACING (4px base) + RADII ======================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px; /* =========================================================================== 4. ELEVATION + GLOW ======================================================================== */ --shadow-1: 0 1px 2px rgba(0,0,0,.45); /* hairline lift */ --shadow-2: 0 6px 20px rgba(0,0,0,.50); /* card */ --shadow-3: 0 16px 48px rgba(0,0,0,.60); /* modal / toast */ --ring: 0 0 0 3px var(--brand-glow); /* focus ring */ /* neon glows for interactive / win states */ --glow-brand: 0 6px 24px var(--brand-glow); --glow-win: 0 6px 28px var(--win-glow); --glow-lose: 0 6px 24px var(--lose-glow); --glow-violet: 0 6px 24px var(--violet-glow); --glow-accent: 0 6px 24px var(--accent-glow); /* =========================================================================== 5. SYNTHWAVE FX — neon glow, geometric grid, CRT scanline. Low-opacity + cheap; consumers must gate motion on prefers-reduced-motion. ======================================================================== */ --neon-glow: 0 0 12px var(--brand-glow), 0 0 28px var(--accent-glow); --neon-glow-text: 0 0 8px var(--brand-glow); --grid-color: rgba(124, 58, 237, .10); /* faint geometric grid lines */ --grid-size: 40px; /* grid cell size */ --scanline-color: rgba(0, 0, 0, .35); /* CRT scanline stripe */ --scanline-opacity: .05; /* overall overlay opacity */ --scanline-size: 3px; /* scanline period */ /* =========================================================================== 6. MOTION ======================================================================== */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* decelerate — entrances */ --ease-in-out: cubic-bezier(.65, .05, .36, 1); /* smooth two-way */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* overshoot — pops */ --dur-1: 90ms; /* micro: hover / press */ --dur-2: 180ms; /* standard control */ --dur-3: 320ms; /* panel / reveal */ --dur-4: 600ms; /* celebration / count-up */ /* =========================================================================== 7. Z-INDEX LADDER (named, never magic numbers in components) ======================================================================== */ --z-base: 0; --z-raised: 10; /* raised cards / sticky sub-headers */ --z-sticky: 20; /* sticky bet/cash-out bar */ --z-header: 30; /* top nav */ --z-overlay: 40; /* game-canvas overlays */ --z-confetti: 90; /* win celebration burst */ --z-modal: 95; /* dialogs / sheets */ --z-toast: 100; /* toasts — always on top */ /* =========================================================================== LAYOUT ======================================================================== */ --maxw: 1080px; --maxw-wide: 1320px; /* tablet/desktop two-pane lobby */ /* H4 — DATA-DENSE content cap. The 1320px --maxw-wide left wide screens with a tall single column + empty horizontal gutters on dense dashboards (/rewards, /wallet, /account, leaderboards). --maxw-dash is a fluid step-up (never below the old 1320px floor, grows with the viewport, capped so lines never sprawl) applied to main/footer on data-dense routes only; the narrow sign-in + fairness-prose views keep --maxw. */ --maxw-dash: clamp(1320px, 92vw, 1680px); /* safe-area insets (notch / home bar) — 0 where unsupported */ --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); /* minimum touch target (>= 44x44) */ --touch: 44px; } /* ============================================================================= 8. LIGHT VARIANT (optional — dark is primary). Opt in with . Only overrides what must change; the structure, spacing, motion and z-index ladder are shared. Synthwave reads as a dark theme; the light variant is a softened lavender-tinted fallback. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f2fb; --bg-1: #ffffff; --surface: #ffffff; --surface-2: #f6f4fd; --surface-3: #ece8f9; --surface-4: #e0d9f5; --scrim: rgba(26, 16, 51, .45); --line: #e4def4; --line-2: #d2c7ee; --line-3: #b39ddb; --fg: #1a1033; --fg-dim: #3c2f5e; --muted: #5b5078; --faint: #8b82a6; --brand-ink: #ffffff; --accent-ink: #ffffff; --win-ink: #04140f; --shadow-1: 0 1px 2px rgba(26,16,51,.10); --shadow-2: 0 6px 20px rgba(26,16,51,.12); --shadow-3: 0 16px 48px rgba(26,16,51,.18); }