/* ===================================================================== NXTbets Sports — Design Tokens --------------------------------------------------------------------- Two layers: 1. BRAND palette — raw, fixed brand colours (shared with the athletes design system; never themed). 2. SEMANTIC tokens (--lp-*) — what the layout actually consumes. Theme is a variable flip, not a stylesheet rewrite. DARK is the default (it lives on :root). LIGHT is the opt-in: • — force the light palette (Explicit is also honoured, but it's the default.) ===================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500;1,700&display=swap"); :root { /* ---------- BRAND CORE (raw, never themed) ---------- */ --brand-navy: #00142D; --brand-navy-2: #012655; --brand-navy-3: #3F689B; --brand-blue: #0DB5FF; --brand-orange: #FF864A; --brand-orange-deep: #FF631A; --brand-gold: #F9CF17; --white: #FFFFFF; --black: #000000; /* ---------- SEMANTIC — DARK (default) ---------- */ --lp-page-bg: #0A0F1A; /* page background */ --lp-surface: #0F1726; /* cards / panels */ --lp-surface-2: #131D30; /* soft inset surface */ --lp-hero-bg: #060B14; /* hero / dark panels */ --lp-hero-ink: #FFFFFF; /* text on the hero */ --lp-ink: #E8EEF7; /* primary text */ --lp-ink-soft: #C3CEDD; /* secondary text */ --lp-ink-muted: #8893A5; /* meta text */ --lp-link: #4FA8FF; /* inline links */ --lp-accent: #0DB5FF; /* primary action / accent (overridden per-league inline) */ --lp-accent-ink: #00142D; /* readable text on the accent fill */ --lp-pro: #FF7A3C; /* PRO / urgency accent */ /* Primary button (copied from the /play{slug} Elementor btn-primary) */ --lp-btn-bg: #00A9F3; --lp-btn-bg-hover: #2EBFFF; --lp-btn-border: #7FD8FF; --lp-btn-text: #FFFFFF; --lp-border: #1F3656; /* signature card border */ --lp-border-soft: #1A2A42; /* hairline / inner stroke */ --lp-rule: #1A2334; /* divider */ --lp-shadow: 0px 4px 14px 0px rgba(0,0,0,0.55); --lp-shadow-soft: 0px 4px 10px 0px rgba(0,0,0,0.4); /* ---------- RADII / SPACING (shared, not themed) ---------- */ --lp-r-sm: 6px; --lp-r-md: 10px; --lp-r-lg: 16px; --lp-r-pill: 999px; --lp-s-1: 4px; --lp-s-2: 8px; --lp-s-3: 12px; --lp-s-4: 16px; --lp-s-5: 24px; --lp-s-6: 32px; --lp-s-7: 40px; --lp-s-8: 48px; --lp-s-9: 64px; --lp-maxw: 1440px; /* content container width */ --lp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------- SEMANTIC — LIGHT (opt-in) ---------- Remap ONLY the semantic tokens. Everything in the layout references --lp-*, so this block is the entire light theme. Activate with . */ :root[data-theme="light"] { --lp-page-bg: #ECECF6; --lp-surface: #FFFFFF; --lp-surface-2: #F3F9FF; --lp-hero-bg: #00142D; --lp-hero-ink: #FFFFFF; --lp-ink: #00142D; --lp-ink-soft: #1E1E1E; --lp-ink-muted: #8E8E8E; --lp-link: #006CF0; --lp-accent: #0DB5FF; --lp-accent-ink: #00142D; --lp-pro: #FF631A; --lp-border: #9CCBFF; --lp-border-soft: #DBECFF; --lp-rule: #EDEDED; --lp-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15); --lp-shadow-soft: 0px 4px 8px 0px rgba(0,0,0,0.06); }