/* ===================================================================== NXTbets Athletes — Design Tokens --------------------------------------------------------------------- SYNCED COPY of nxtbets-sports/assets/css/tokens.css so the athlete pages share the League CPT design system without a cross-plugin CSS dependency (same convention as the league archive). If you change the palette, change it in BOTH plugins. Two layers: 1. BRAND palette — raw, fixed brand colours (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.) ===================================================================== */ :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 */ --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); } /* ---------- LEGACY BRIDGE ---------- colors_and_type.css (the original Figma light system) defines the vars the v2 component styles consume. Re-pointing them at the --lp-* semantics here (this sheet loads after it) moves every component onto the shared League token system — dark by default, light via — without rewriting the component sheet's var names. NOTE: --brand-navy is NOT bridged globally (it doubles as a background colour); styles-v2.css remaps it to --lp-ink inside .v2-shell only. */ :root { --ink: var(--lp-ink); --ink-soft: var(--lp-ink-soft); --ink-muted: var(--lp-ink-muted); --blue-link: var(--lp-link); --surface: var(--lp-page-bg); --rule: var(--lp-rule); --fg-1: var(--lp-ink); --fg-2: var(--lp-ink-soft); --fg-3: var(--lp-ink-muted); --fg-link: var(--lp-link); --bg-page: var(--lp-page-bg); --bg-panel: var(--lp-surface); --bg-panel-tint: var(--lp-surface-2); --bg-strip: var(--lp-surface-2); --border-card: var(--lp-border); --border-inner: var(--lp-border-soft); --blue-100: var(--lp-surface-2); --blue-150: var(--lp-surface-2); --blue-300: var(--lp-border); --blue-500: var(--lp-border); --shadow-card: var(--lp-shadow-soft); --shadow-panel: var(--lp-shadow); --shadow-soft: var(--lp-shadow-soft); }