/* ========================================================================== Memberium — Design Tokens & Theming The ONLY place colors are defined. Components reference var(--*). Three switchable palettes via [data-theme] on . Switch with: document.documentElement.dataset.theme = 'navy-gold'; ========================================================================== */ :root { /* ---- Shared structural tokens (palette-independent) ---- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --container: 1180px; --container-narrow: 860px; --header-h: 68px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 0.32s; color-scheme: dark; } /* ========================================================================== PALETTE 1 (default) — Navy + Gold Institutional, premium, in-control. ========================================================================== */ :root, [data-theme="navy-gold"] { --name: "Navy + Gold"; --bg: #0B1426; --bg-elevated: #111E36; --bg-card: #15233E; --surface: #1B2A4A; --surface-hover: #21315a; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #EAEFF8; --text-muted: #9AA7BE; --text-dim: #6B7895; --accent: #E0B15E; --accent-hover: #ECC078; --accent-soft: rgba(224, 177, 94, 0.12); --accent-line: rgba(224, 177, 94, 0.32); --accent-contrast: #0B1426; --secondary: #4A7CFF; --secondary-soft: rgba(74, 124, 255, 0.14); --success: #34D399; --danger: #F87171; --warning: #FBBF24; --code-bg: #08101F; --code-text: #D6DEEA; --glow: radial-gradient(60% 80% at 50% 0%, rgba(224, 177, 94, 0.10), transparent 70%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow: 0 10px 40px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); } /* ========================================================================== PALETTE 2 — Slate + Sapphire Competent, modern, trustworthy (dev-tool feel). ========================================================================== */ [data-theme="slate-sapphire"] { --name: "Slate + Sapphire"; --bg: #0F172A; --bg-elevated: #1B2740; --bg-card: #1E2A44; --surface: #25344F; --surface-hover: #2C3D5E; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.14); --text: #F1F5F9; --text-muted: #94A3B8; --text-dim: #64748B; --accent: #3B6FE0; --accent-hover: #5586F0; --accent-soft: rgba(59, 111, 224, 0.16); --accent-line: rgba(59, 111, 224, 0.38); --accent-contrast: #FFFFFF; --secondary: #22D3EE; --secondary-soft: rgba(34, 211, 238, 0.13); --success: #34D399; --danger: #F87171; --warning: #FBBF24; --code-bg: #0B1222; --code-text: #D6DEEA; --glow: radial-gradient(60% 80% at 50% 0%, rgba(59, 111, 224, 0.14), transparent 70%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow: 0 10px 40px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5); } /* ========================================================================== PALETTE 3 — Charcoal + Emerald Stable, secure, growth-oriented. ========================================================================== */ [data-theme="charcoal-emerald"] { --name: "Charcoal + Emerald"; --bg: #111418; --bg-elevated: #181D24; --bg-card: #1A2028; --surface: #232932; --surface-hover: #2B333E; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); --text: #F3F4F6; --text-muted: #9CA3AF; --text-dim: #6B7280; --accent: #10B981; --accent-hover: #34D399; --accent-soft: rgba(16, 185, 129, 0.14); --accent-line: rgba(16, 185, 129, 0.34); --accent-contrast: #06281F; --secondary: #60A5FA; --secondary-soft: rgba(96, 165, 250, 0.13); --success: #34D399; --danger: #F87171; --warning: #FBBF24; --code-bg: #0A0D11; --code-text: #D6DEEA; --glow: radial-gradient(60% 80% at 50% 0%, rgba(16, 185, 129, 0.12), transparent 70%); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow: 0 10px 40px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); } /* Smooth palette transitions */ html { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }