/* ============================================================================= bust.fun — DESIGN TOKENS · DIRECTION B "NEON NOIR" (LIVE — the active site theme, linked in index.html) ----------------------------------------------------------------------------- A Shuffle / Rollbit-style premium dark theme. Near-black base, vivid VIOLET + MAGENTA/PINK neon accents with soft glow, glassmorphic surfaces (translucent panels, thin light borders, backdrop-blur), a modern teal WIN / red LOSS pair, and GOLD reserved ONLY for VIP tiers + big-win celebration accents. THIS IS A DRAFT. It does NOT overwrite tokens.css. To preview Neon Noir, swap the in index.html for this file (or load it AFTER tokens.css so its :root wins the cascade). Promotion to the real theme = copy these VALUES into tokens.css (keeping the names) once approved. TOKEN NAMES ARE A CONTRACT. Every name here matches tokens.css exactly so the whole site re-themes by value-swap alone. New names added at the bottom of the palette block (--glass-*, --blur*, --vip-*, --magenta*) are PURELY ADDITIVE — nothing that exists today depends on them, so adding them breaks nothing. Buildless: plain CSS custom properties, no preprocessor. No live CDN — fonts are self-hosted woff2 in /fonts (CLAUDE.md inv-7). NO token forces motion; the prefers-reduced-motion guards stay in styles.css / animations.css untouched. ----- CONTRAST (WCAG): all text ratios below are vs the new base --bg #0a0a0f. Normal text must clear 4.5:1; large/bold text 3:1. Verified values noted inline. The violet --brand stays a NON-TEXT fill (fails AA as small text, same as today); --violet is the AA-safe purple for tinted labels/numbers. ========================================================================== */ /* ----------------------------------------------------------------------------- SELF-HOSTED FONTS (woff2, latin subset, font-display: swap) ----------------------------------------------------------------------------- TYPE PAIRING SWAP — Neon Noir wants a tighter, less-rounded premium feel than Fredoka/Nunito. Recommended pairing (both self-hostable, OFL, latin-subsettable to a single variable woff2 like the current faces): DISPLAY / NUMBERS : "Clash Display" (tight geometric grotesk) — or — "Space Grotesk" (free, OFL, very Rollbit-adjacent) BODY / UI : "Inter" (the de-facto premium-UI grotesk) Space Grotesk + Inter is the safest pick: both are OFL, both have clean latin subsets, both self-host as a single variable woff2 each — a drop-in replacement for the two files we already ship. Until the new woff2 land in /fonts, this file keeps the EXISTING @font-face block (Fredoka + Nunito) so nothing 404s; we only re-point the --font-display / --font-body STACKS' first family below, with the old families left as the fallback so the page renders either way. To complete the swap (see _reskin-plan-B.md step D): 1. Add fonts/space-grotesk-latin.woff2 + fonts/inter-latin.woff2 to /fonts 2. Add @font-face blocks for "Space Grotesk" (500/600/700) + "Inter" (400/600/700) mirroring the unicode-range below. 3. The --font-display / --font-body values below already list the new family first, so once the faces exist they take over with zero other edits. -------------------------------------------------------------------------- */ @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 — kill the FOUT swap reflow / CLS) ----------------------------------------------------------------------------- This is the ACTIVE theme (loaded after tokens.css; its :root wins). It re-points --font-display / --font-body below, so the metric-matched fallback aliases must be declared HERE too and placed first in those stacks — otherwise the swap from the local fallback to the real web font reflows every heading / payout / balance pill. The display pairing today resolves to Fredoka, body to Nunito (the Space Grotesk / Inter woff2 aren't shipped yet — see the commented block below); both fall through to a tuned LOCAL grotesk so the swap is metric-for-metric silent. Presentation-only, no extra network request. See tokens.css for the full rationale. */ @font-face { font-family: "Display 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: "Body Fallback"; src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"); size-adjust: 100%; ascent-override: 101%; descent-override: 35%; line-gap-override: 0%; } /* ===== Neon Noir type faces (uncomment once the woff2 are added to /fonts) ===== @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/space-grotesk-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: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-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: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-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; } ================================================================================ */ :root { color-scheme: dark; /* =========================================================================== 1. PALETTE — Neon Noir: violet + magenta neon over near-black glass. AA ratios verified against the new base --bg #0a0a0f. ======================================================================== */ /* ---- surfaces: Stake-style dark slate blue-grey, darkest -> raised ---- */ --bg: #0f212e; /* page backdrop — dark slate blue-grey */ --bg-1: #0a1822; /* under-cards / input wells — deepest well */ --surface: #1a2c38; /* card — the table-felt slate */ --surface-2: #213743; /* subcard / inset */ --surface-3: #2f4553; /* hover / raised control */ --surface-4: #3a5160; /* highest raised (active chip, popover) */ --scrim: rgba(5, 12, 18, .78); /* modal/sheet backdrop */ /* ---- hairlines / borders (cool neutral blue-grey) ---- */ --line: #213743; /* default border */ --line-2: #2f4553; /* stronger border (controls) */ --line-3: #557086; /* hover / emphasis border — light slate */ /* ---- text (slate-white on the blue-grey base) ---- */ --fg: #ffffff; /* primary */ --fg-dim: #d5dce3; /* secondary */ --muted: #92a3b1; /* tertiary/labels — Stake muted blue-grey (4.78:1 on the std card #213743) */ /* P2-05 (a11y contrast): --muted (#92a3b1) passes AA on the standard card (--surface-2 #213743, 4.78:1) but FAILS on the lighter ELEVATED surfaces it's also used on — --surface-3 #2f4553 (3.86:1) and --surface-4 #3a5160 (3.21:1) — which back chips / segmented buttons / stat tiles. --muted-2 is a slightly lighter muted JUST for muted labels on those elevated surfaces: 4.68:1 on #3a5160 and 5.64:1 on #2f4553 (both ≥ AA 4.5:1), while the standard-card --muted is untouched (no 4.78:1 regression). */ --muted-2: #b8c4ce; /* muted text on elevated surfaces (chip/seg/stat bgs) — AA on --surface-3/-4 */ --faint: #5e7184; /* quaternary/placeholders (non-text deco only) */ /* aliases (kept; later squads may use these) */ --muted-surface: #213743; /* faint raised muted block */ --text-muted: #92a3b1; /* explicit alias of --muted (readable label) */ /* ---- brand: primary GREEN — the "winning" / action color ---- */ --brand: #1fc16b; /* vivid casino green — primary action */ --brand-2: #16a058; /* gradient foot / strong / hover */ --brand-ink: #062b13; /* dark green-black text on a green fill (high contrast) */ --brand-soft: rgba(31, 193, 107, .15); /* tinted fills */ --brand-glow: rgba(31, 193, 107, .38); /* subtle lift (de-neoned) */ /* explicit primary aliases (stable names for later squads) */ --primary: #1fc16b; --primary-strong: #16a058; --primary-hover: #2bdd7e; /* ---- secondary accent: BLUE (links / secondary highlights) ---- */ --violet: #68a3f6; /* secondary blue — nudged ~8% lighter so it clears WCAG AA (4.5:1) on ELEVATED surfaces (topbar/cards ~#213743), not only the base bg (was #5b9bf5 = 4.4:1 there — balance, links, share, player-id failed by a hair) */ --violet-2: #3b82f6; --violet-soft: rgba(104, 163, 246, .15); --violet-glow: rgba(104, 163, 246, .35); --secondary: #68a3f6; /* explicit alias (tracks --violet) */ /* ---- CTA / action accent: BLUE (secondary CTA, e.g. Deposit) ---- */ --accent: #2f80ed; /* blue CTA (as a FILL/border/icon; NOT as small text on dark) */ --accent-2: #1f6fd6; /* deeper blue foot / hover */ --accent-ink: #ffffff; /* white text on blue fill */ /* a11y: --accent as small TEXT on a dark elevated surface is only ~3.2:1 (fails AA 4.5:1). --accent-text is the lightened blue for accent-colored TEXT (ranks, links, kickers) — 4.88:1 on --surface-2. Fills/borders/ icons keep --accent (3:1 non-text is fine). The light theme re-points this DARKER (see [data-theme=light]). */ --accent-text: #6aa5f0; --accent-soft: rgba(47, 128, 237, .15); --accent-glow: rgba(47, 128, 237, .38); /* ---- tertiary accent: sky blue (info / live) ---- */ --cyan: #38bdf8; --cyan-glow: rgba(56, 189, 248, .38); /* ---- semantic: win / loss / neutral / warn / info ---- */ --win: #20c46a; /* winning green (aligned with brand) */ --win-2: #16a058; --win-grad-end: #15b96b; /* the darker FOOT of the win-button gradient (was raw #15b96b in 6 files) */ --win-ink: #04210f; --win-soft: rgba(32, 196, 106, .12); --win-glow: rgba(32, 196, 106, .38); --lose: #f43f5e; /* modern vivid red/rose — 5.0:1 on bg */ --lose-2: #e11d48; --lose-soft: rgba(244, 63, 94, .12); --lose-glow: rgba(244, 63, 94, .50); /* destructive alias (stable name) — same as lose */ --destructive: #f43f5e; --destructive-ink: #ffffff; /* 3.8:1 large-text only; use sparingly */ --neutral: #9595a8; /* "push" / no-change */ --warn: #ffb84d; /* amber — 11.2:1 on bg */ --warn-soft: rgba(255, 184, 77, .12); --warn-glow: rgba(255, 184, 77, .42); --info: #22d3ee; /* cyan info — 10.3:1 on bg */ /* ---- GOLD — RESERVED for VIP tiers + big-win celebration ONLY (not chrome) ---- */ --gold: #ffcf5c; /* 14.2:1 on bg */ --gold-2: #e6b23e; --gold-grad-end: #d99a17; /* the darker FOOT of the gold-button gradient (was raw #d99a17 in baccarat/roulette) */ --gold-glow: rgba(255, 207, 92, .42); /* =========================================================================== 1b. GLASSMORPHISM (additive) — translucent panels, thin light borders, backdrop-blur. Consumers opt in (e.g. .topbar, .card, popovers); these are new NAMES, so nothing today changes until a rule references them. NOTE: backdrop-filter is decorative; if unsupported the --glass-bg alpha still yields a legible dark panel (graceful degradation, no motion). ======================================================================== */ --glass-bg: rgba(20, 20, 28, .62); /* translucent panel fill (over bg) */ --glass-bg-strong: rgba(14, 14, 22, .78); /* heavier glass (modals/topbar) */ --glass-border: rgba(255, 255, 255, .08);/* thin light hairline on glass */ --glass-border-2: rgba(255, 255, 255, .14);/* stronger light edge (hover) */ --glass-highlight: rgba(255, 255, 255, .05);/* top inner sheen */ --blur: 14px; /* standard backdrop-blur radius */ --blur-sm: 8px; /* light blur (chips/pills) */ --blur-lg: 22px; /* heavy blur (modal scrim) */ /* ---- VIP / big-win gold accents (additive) — gold gradient + glow set ---- */ --vip-gold: #ffcf5c; --vip-gold-2: #e6b23e; --vip-gradient: linear-gradient(135deg, #ffe39a 0%, #ffcf5c 45%, #e6b23e 100%); --vip-glow: rgba(255, 207, 92, .55); --vip-ink: #2a1c00; /* dark ink on gold fill — high contrast */ /* ---- secondary-blue aliases (additive; formerly magenta) ---- */ --magenta: #2f80ed; --magenta-2: #1f6fd6; --magenta-glow: rgba(47, 128, 237, .38); /* =========================================================================== 2. TYPE SCALE — Neon Noir: Space Grotesk (display/numbers) + Inter (body). First family listed is the NEW face; the OLD face (Fredoka/Nunito) stays in the stack as a fallback so the page renders even before the woff2 are added. --font-sans stays an alias of --font-body so existing rules pick up the swap. ======================================================================== */ /* ORDER IS DELIBERATE — do NOT move the "* Fallback" alias before a real face. The metric-adjusted "* Fallback" alias must come AFTER every real web face and BEFORE the generic system fonts (this is the canonical next/font / Capsize order: `'WebFont', 'WebFont Fallback', …`). Font-matching uses the first AVAILABLE family per glyph; a still-loading `font-display:swap` face is "temporarily unavailable", so matching FALLS THROUGH it to the next family. With this order: • Today: "Space Grotesk" is an ABSENT family (its woff2 isn't shipped — the @font-face is commented out) → skipped instantly. "Fredoka" IS a real swap face → while it loads, matching falls through to "Display Fallback" (an always-present LOCAL face) which paints with Fredoka-matched metrics → Fredoka swaps in silently on load (no reflow). The fallback bridges Fredoka's load. • Later (SG/Inter enabled): same mechanism bridges Space Grotesk's load. If the fallback were placed BEFORE a real face (e.g. "Space Grotesk", "Display Fallback", "Fredoka"), the always-present local "Display Fallback" would win permanently and Fredoka would NEVER load — the opposite of the fix. So the alias stays second. RE-TUNE PREREQUISITE: the "Display Fallback" / "Body Fallback" overrides are tuned for the LIVE faces (Fredoka / Nunito — what resolves today). When SG/Inter become the first resolved face, re-tune those overrides to SG/Inter metrics (SG is tighter + less round than Fredoka) or the swap reflows against a Fredoka-tuned fallback. Until then the current values are correct. */ --font-display: "Space Grotesk", "Fredoka", "Display Fallback", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Inter", "Nunito", "Body 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; /* Space Grotesk 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 — unchanged (structure-preserving reskin) ======================================================================== */ --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 — deeper black shadows for the near-black base. ======================================================================== */ --shadow-1: 0 1px 2px rgba(0,0,0,.55); /* hairline lift */ --shadow-2: 0 8px 24px rgba(0,0,0,.58); /* card */ --shadow-3: 0 20px 56px rgba(0,0,0,.68); /* modal / toast */ --ring: 0 0 0 3px var(--brand-glow); /* focus ring */ /* neon glows for interactive / win states */ --glow-brand: 0 6px 26px 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 26px var(--accent-glow); /* =========================================================================== 5. NEON-NOIR FX — neon glow + faint grid + scanline (kept; retuned violet). The grid/scanline are far subtler in Neon Noir than synthwave (premium, not retro). Names are UNCHANGED so styles.css body::before/::after keep working; a future cleanup may zero these out entirely for a flat glass look. Low-opacity + cheap; consumers gate motion on prefers-reduced-motion (the guard lives in styles.css, NOT here — no token forces motion). ======================================================================== */ --neon-glow: 0 6px 20px rgba(0, 0, 0, .45); /* clean lift shadow (de-neoned) */ --neon-glow-text: none; /* no text glow in the flat theme */ --grid-color: rgba(255, 255, 255, .015); /* near-off neutral grid */ --grid-size: 44px; /* grid cell size */ --scanline-color: rgba(0, 0, 0, .20); /* scanline stripe */ --scanline-opacity: 0; /* OFF — flat clean Stake look */ --scanline-size: 3px; /* scanline period */ /* =========================================================================== 6. MOTION — unchanged (no token forces motion; durations/easings only) ======================================================================== */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, .05, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-1: 90ms; --dur-2: 180ms; --dur-3: 320ms; --dur-4: 600ms; /* =========================================================================== 7. Z-INDEX LADDER — unchanged ======================================================================== */ --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-header: 30; --z-overlay: 40; --z-confetti: 90; --z-modal: 95; --z-toast: 100; /* =========================================================================== LAYOUT — unchanged ======================================================================== */ --maxw: 1080px; --maxw-wide: 1320px; /* H4 — data-dense content cap (see tokens.css). Re-stated here so the active theme's :root carries it; data-dense routes step main/footer up to this, narrow views keep --maxw. */ --maxw-dash: clamp(1320px, 92vw, 1680px); --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); --touch: 44px; /* =========================================================================== PEER-COMPLETION — base tokens mirrored so Neon Noir is a COMPLETE standalone theme (honors this file's own "every name matches tokens.css" contract). These 11 names live ONLY in tokens.css's base :root; without them here, swapping to Neon-Noir-alone (per the header instructions) would leave tier chips, borders, radii, --bg-2 and --ok resolving to NOTHING. The structural five are aliases to tokens THIS file already overrides, so they track the Neon Noir palette; the tier metals are theme-neutral (bronze is bronze). Values equal tokens.css → the current dual-load render is byte-identical. Enforced by packages/shared/test/design-token-peer-drift.test.ts. */ --border: var(--line-2); --radius: var(--r-md); --radius-2: var(--r-md); --bg-2: var(--surface-2); --ok: var(--win, #34d399); --tier-bronze: #cd7f32; --tier-silver: #c0c0c0; --tier-gold: var(--gold); --tier-platinum: #67e8f9; --tier-diamond: #7dd3fc; --tier-ruby: #fb7185; --tier-emerald: #34d399; } /* ============================================================================= 8. LIGHT VARIANT (optional — dark is primary). Opt in with . Neon Noir is fundamentally a dark theme; this is a softened cool-lavender fallback that keeps the violet/magenta accents readable. Only overrides what must change; spacing, motion, z-index ladder are shared. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f4fa; --bg-1: #ffffff; --surface: #ffffff; --surface-2: #f6f5fc; --surface-3: #eceaf6; --surface-4: #e0ddf0; --scrim: rgba(10, 10, 15, .45); --line: #e6e3f1; --line-2: #d6d1ea; --line-3: #8b5cf6; --fg: #15131f; --fg-dim: #3a3550; --muted: #5b5772; /* P2-05: in LIGHT mode the elevated surfaces are LIGHT, so --muted (#5b5772) already clears AA on them (5.79:1 / 5.17:1). --muted-2 must NOT inherit the dark value here (it would vanish on a light surface), so pin it to the same dark muted — keeps the elements that use --muted-2 readable in light mode. */ --muted-2: #4f4b66; --faint: #8b86a0; --brand-ink: #ffffff; --accent-ink: #ffffff; --win-ink: #04140f; /* a11y: on a LIGHT surface, accent TEXT must be a DEEP blue (the dark-theme #6aa5f0 would vanish). 6.1:1 on the light --surface-2 (#f6f5fc). Fills/icons keep --accent. */ --accent-text: #1857b8; /* glass reads inverted in light mode (translucent white panels) */ --glass-bg: rgba(255, 255, 255, .66); --glass-bg-strong: rgba(255, 255, 255, .82); --glass-border: rgba(20, 16, 40, .08); --glass-border-2: rgba(20, 16, 40, .14); --glass-highlight: rgba(255, 255, 255, .6); --shadow-1: 0 1px 2px rgba(15,13,31,.10); --shadow-2: 0 8px 24px rgba(15,13,31,.12); --shadow-3: 0 20px 56px rgba(15,13,31,.18); }