/* ============================================================ BCE — "Dark Luxe" theme (exploration) Activated by . Re-maps the design-system's SEMANTIC tokens only, so every page + component flips automatically. Champagne-gold accent replaces the orange CTA (echoes the brushed-gold hardware). Nothing here touches the default (light) theme. ============================================================ */ [data-theme="dark-luxe"] { /* ---- Surfaces: deep midnight glass ---- */ --surface-page: #0A1A30; /* page background (near-black navy) */ --surface-card: #112440; /* raised panels & cards */ --surface-raised: #15294A; --surface-sunken: #07111F; --surface-dark: #081627; --surface-dark-deep: #050D18; /* ---- Navy brand token (drives .bce-texture-navy, avatars, navy badges) ---- */ --bce-navy: #0B1E38; --bce-navy-deep: #07101F; /* ---- Text: warm whites ---- */ --text-strong: #F6F3EC; --text-body: #C4CEDD; --text-muted: #8A98AF; --text-faint: #647189; --text-on-dark: #FFFFFF; --text-on-dark-muted: rgba(255,255,255,0.64); --text-brand: #FF7A30; --text-accent: #FF7A30; --text-link: #FF7A30; /* ---- Borders / dividers ---- */ --border-subtle: rgba(255,255,255,0.09); --border-default: rgba(255,255,255,0.16); --border-strong: rgba(255,255,255,0.28); --border-dark: rgba(255,255,255,0.12); --border-accent: #FF5A00; /* ---- Accent: BCE orange CTA + accents (on dark ground) ---- */ --bce-orange: #FF5A00; --bce-orange-hover: #E84F00; --bce-orange-soft: #FF7A30; --orange-50: rgba(255,90,0,0.14); --orange-100: rgba(255,90,0,0.30); --orange-300: #FFA468; --orange-500: #FF5A00; --orange-600: #E84F00; --orange-700: #FFA468; /* used as fg on tinted badges → light orange */ /* CTA button: white text on orange */ --action-bg: #FF5A00; --action-bg-hover: #FF7A30; --action-fg: #FFFFFF; --action-ring: rgba(255,90,0,0.34); --focus-ring: #FF5A00; /* ---- Glass-blue accents, lightened so they read on dark ---- */ --bce-blue: #8FB0E8; --bce-blue-bright: #A9C6F4; --blue-50: rgba(255,255,255,0.06); --blue-100: #CBD8EE; /* large outline section numbers */ --blue-200: #9DB4E0; --blue-300: #6E8BC9; /* Secondary (blue) button stays a true brand blue, just a touch brighter */ --action-blue-bg: #3A62D6; --action-blue-bg-hover: #4E74E0; /* ---- Shadows: deeper for dark ground ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --shadow-md: 0 10px 30px rgba(0,0,0,0.50); --shadow-lg: 0 18px 48px rgba(0,0,0,0.55); --shadow-xl: 0 28px 70px rgba(0,0,0,0.62); --shadow-orange: 0 12px 34px rgba(255,90,0,0.30); /* ---- Header (new vars; Header.jsx falls back to light values without them) ---- */ --header-bg-scrolled: rgba(9,21,40,0.82); --header-border-scrolled: rgba(255,255,255,0.10); } /* Frosted-glass scrolled header needs the blur to read on dark */ [data-theme="dark-luxe"] header { -webkit-backdrop-filter: saturate(150%) blur(14px); } /* Mobile menu panel (hardcoded white in the component) → dark glass */ [data-theme="dark-luxe"] .site-mobile-menu { background: rgba(9,21,40,0.97) !important; } /* Body background safety (base.css already uses --surface-page) */ [data-theme="dark-luxe"] body { background: var(--surface-page); }