/* ============================================================================ FRENZY96 — Deep-Sea Redesign · TOKEN LAYER (fz-tokens.css) ---------------------------------------------------------------------------- Phase 1 of the pure-UI redesign. This file is the SINGLE global recolor hook. Strategy (no !important — cascade order only): • Declared LAST among stylesheets in index.html . • Block A declares the full --fz-* design system (from tokens/*.css). • Block B RE-POINTS the existing live variables (--bg / --surface / --gold / --red / --green / --text… and theme-d's --d-*) to --fz-* values. Because this :root block is authored after main.css + theme-d.css, it overrides their :root at equal specificity by pure source order. Every component that reads var(--surface), var(--gold)… instantly adopts the deep-sea palette with ZERO markup or component-CSS edits. This mirrors the pattern theme-d.css already uses one layer down, so it is a proven, additive approach — it changes nothing structural, only token values. Structural / hard-coded-hex work lives in per-screen fz-.css files. ============================================================================ */ /* ══════════════════════════════════════════════════════════════════════════ BLOCK A — Deep-Sea design system (--fz-*) ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Brand surface: Petrol Teal (marketing backgrounds, hero) ─────────── */ --fz-teal-deep: #082A30; --fz-teal: #0E4D54; --fz-teal-2: #0B3A42; --fz-teal-line: rgba(41, 182, 232, 0.16); /* ── App chrome: Navy / near-black (lobby, modals, wallet) ────────────── */ --fz-navy-deep: #07080D; --fz-navy: #0A1822; --fz-navy-2: #0E2430; --fz-surface: #122A33; --fz-surface-2: #16333D; --fz-surface-3: #1C414D; /* ── Cyan — primary accent (numbers, links, glow, active) ─────────────── */ --fz-cyan: #29B6E8; --fz-cyan-bright: #0CC0FF; --fz-cyan-deep: #1B7FA8; --fz-cyan-soft: rgba(41, 182, 232, 0.12); --fz-cyan-glow: rgba(41, 182, 232, 0.42); /* ── Crimson — brand energy (logo, urgency, hot) ──────────────────────── */ --fz-red: #E0234B; --fz-red-bright: #FF2D55; --fz-red-deep: #A8143A; --fz-red-soft: rgba(224, 35, 75, 0.12); /* ── Gold — money, wins, VIP, primary CTA ─────────────────────────────── */ --fz-gold: #F5C842; --fz-gold-hi: #FFE082; --fz-gold-deep: #C08E1A; --fz-gold-soft: rgba(245, 200, 66, 0.12); --fz-gold-glow: rgba(245, 200, 66, 0.45); /* ── Green — deposit / success / money-in ─────────────────────────────── */ --fz-green: #1ED571; --fz-green-deep: #0F7A40; --fz-green-soft: rgba(30, 213, 113, 0.12); /* ── Semantic states ──────────────────────────────────────────────────── */ --fz-success: #1ED571; --fz-success-soft:rgba(30, 213, 113, 0.12); --fz-warn: #F5A623; --fz-warn-soft: rgba(245, 166, 35, 0.12); --fz-danger: #E0524D; --fz-danger-soft: rgba(224, 82, 77, 0.12); --fz-info: #3A7BD5; --fz-info-soft: rgba(58, 123, 213, 0.12); /* ── Text / ink (on dark) ─────────────────────────────────────────────── */ --fz-white: #FFFFFF; --fz-text: #E8EAEF; --fz-text-2: #A6B0BC; --fz-text-3: #6E7B88; --fz-text-faint: rgba(232, 234, 239, 0.34); --fz-on-gold: #14110A; --fz-on-cyan: #04222E; --fz-on-green: #04230F; /* ── Lines & dividers ─────────────────────────────────────────────────── */ --fz-line: rgba(255, 255, 255, 0.08); --fz-line-2: rgba(255, 255, 255, 0.14); --fz-line-faint: rgba(255, 255, 255, 0.05); /* ── Typography ───────────────────────────────────────────────────────── */ --fz-font-display: 'Oswald', 'Anton', 'Arial Narrow', system-ui, sans-serif; --fz-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --fz-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fz-text-2xs: 10px; --fz-text-xs: 11px; --fz-text-sm: 12px; --fz-text-base: 14px; --fz-text-md: 16px; --fz-text-lg: 18px; --fz-text-xl: 22px; --fz-text-2xl: 28px; --fz-text-3xl: 36px; --fz-text-4xl: 48px; --fz-text-5xl: 64px; --fz-text-jackpot: 84px; --fz-w-regular: 400; --fz-w-medium: 500; --fz-w-semibold: 600; --fz-w-bold: 700; --fz-w-black: 800; --fz-track-tight: -0.02em; --fz-track-snug: -0.01em; --fz-track-normal: 0; --fz-track-wide: 0.02em; --fz-track-caps: 0.04em; --fz-track-eyebrow: 0.14em; --fz-leading-none: 1; --fz-leading-tight: 1.15; --fz-leading-snug: 1.35; --fz-leading-body: 1.55; /* ── Spacing (4-base) ─────────────────────────────────────────────────── */ --fz-space-1: 4px; --fz-space-2: 6px; --fz-space-3: 8px; --fz-space-4: 10px; --fz-space-5: 12px; --fz-space-6: 16px; --fz-space-7: 20px; --fz-space-8: 24px; --fz-space-9: 28px; --fz-space-10: 32px;--fz-space-12: 40px;--fz-space-14: 48px; --fz-space-16: 56px;--fz-space-20: 72px; /* ── Radius ───────────────────────────────────────────────────────────── */ --fz-r-xs: 6px; --fz-r-sm: 8px; --fz-r-md: 10px; --fz-r-lg: 12px; --fz-r-xl: 14px; --fz-r-2xl: 18px; --fz-r-3xl: 22px; --fz-r-full: 9999px; /* ── Shadow / depth ───────────────────────────────────────────────────── */ --fz-shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px var(--fz-line); --fz-shadow-md: 0 6px 18px -4px rgba(0,0,0,.5), 0 0 0 1px var(--fz-line); --fz-shadow-lg: 0 14px 34px -10px rgba(0,0,0,.6), 0 0 0 1px var(--fz-line); --fz-shadow-sheet: 0 -8px 40px -8px rgba(0,0,0,.7); --fz-glow-cyan: 0 6px 22px -6px var(--fz-cyan-glow); --fz-glow-gold: 0 6px 22px -6px var(--fz-gold-glow), inset 0 1px 0 rgba(255,255,255,.45); --fz-glow-gold-hover: 0 10px 30px -6px rgba(245,200,66,.7), inset 0 1px 0 rgba(255,255,255,.5); --fz-glow-red: 0 6px 22px -6px rgba(224,35,75,.5); --fz-glow-green: 0 6px 20px -6px rgba(30,213,113,.45); /* ── Gradients ────────────────────────────────────────────────────────── */ --fz-grad-gold: linear-gradient(180deg, var(--fz-gold-hi) 0%, var(--fz-gold) 55%, var(--fz-gold-deep) 100%); --fz-grad-cyan: linear-gradient(135deg, var(--fz-cyan-bright) 0%, var(--fz-cyan) 50%, var(--fz-cyan-deep) 100%); --fz-grad-green: linear-gradient(135deg, var(--fz-green) 0%, var(--fz-green-deep) 100%); --fz-grad-teal: linear-gradient(180deg, var(--fz-teal) 0%, var(--fz-teal-deep) 100%); --fz-grad-surface: linear-gradient(180deg, var(--fz-surface-2) 0%, var(--fz-surface) 100%); /* ── Motion ───────────────────────────────────────────────────────────── */ --fz-ease-out: cubic-bezier(.2,.7,.2,1); --fz-ease-in-out: cubic-bezier(.4,0,.2,1); --fz-ease-spring: cubic-bezier(.2,.8,.3,1.1); --fz-dur-fast: 140ms; --fz-dur-base: 220ms; --fz-dur-slow: 380ms; --fz-dur-marquee: 70s; /* ── Z-index ──────────────────────────────────────────────────────────── */ --fz-z-base: 1; --fz-z-rise: 10; --fz-z-sticky: 200; --fz-z-bottomnav: 300; --fz-z-overlay: 800; --fz-z-modal: 900; --fz-z-toast: 1000; } /* ══════════════════════════════════════════════════════════════════════════ BLOCK B — Re-point EXISTING live variables to deep-sea values ---------------------------------------------------------------------------- These names are the ones main.css / theme-d.css already defined and every component references. Authored after those files → wins by source order. NO !important. Pure token substitution. ══════════════════════════════════════════════════════════════════════════ */ :root { /* base surfaces (main.css L6-11) */ --bg: var(--fz-navy); --bg-2: var(--fz-navy-2); --bg-deep: var(--fz-navy-deep); --surface: var(--fz-surface); --surface-2: var(--fz-surface-2); --border: var(--fz-line); --border-bright: var(--fz-line-2); /* gold family (main.css L12-15) */ --gold: var(--fz-gold); --gold-light: var(--fz-gold-hi); --gold-dark: var(--fz-gold-deep); --gold-bronze: var(--fz-gold-deep); /* red / green (main.css L16-19) */ --red: var(--fz-red); --red-dark: var(--fz-red-deep); --green: var(--fz-green); --green-light: var(--fz-green); /* text (main.css L20-22) */ --text: var(--fz-text); --text-dim: var(--fz-text-2); --text-mute: var(--fz-text-3); /* brand alias (main.css L425-426) — kept as gold; add cyan as new accent */ --brand: var(--fz-gold); --brand-glow: var(--fz-gold-glow); --accent: var(--fz-cyan); --accent-on: var(--fz-on-cyan); /* theme-d --d-* (theme-d.css L12-24) — realign to navy app chrome + fz palette */ --d-green: var(--fz-green-deep); --d-green-dark: var(--fz-green-deep); --d-green-light: var(--fz-green); --d-green-glow: var(--fz-green-soft); --d-gold: var(--fz-gold); --d-gold-light: var(--fz-gold-hi); --d-gold-dark: var(--fz-gold-deep); --d-bg-deep: var(--fz-navy); --d-bg-deeper: var(--fz-navy-deep); --d-surface: var(--fz-surface); --d-surface-2: var(--fz-surface-2); --d-border: var(--fz-line); --d-border-bright:var(--fz-line-2); }