/* ===================================================== WAVESENSE - CSS Custom Properties Theme switching via [data-theme="dark"] on ===================================================== */ :root { /* Brand (constant) */ --primary: #0D9488; --primary-light: #14B8A6; --primary-dark: #0F766E; --accent: #0D9488; --accent-light: #2DD4BF; --danger: #EF4444; --success: #10B981; --warning: #F59E0B; --purple: #7C3AED; /* Light theme (default) — warm cream palette */ --bg: #F6F2EC; --bg-alt: #EDE8DF; --surface: #FAF8F4; --surface-2: #F0ECE4; --surface-3: #E5DFD4; --border: rgba(13,148,136,0.13); --border-strong: rgba(13,148,136,0.28); --text: #0F172A; --text-muted: #4A5568; --text-dim: #94A3B8; --shadow-sm: 0 1px 3px rgba(80,60,20,0.07), 0 1px 2px rgba(80,60,20,0.04); --shadow-md: 0 4px 16px rgba(80,60,20,0.08); --shadow-lg: 0 10px 40px rgba(80,60,20,0.10); --accent-dim: rgba(13,148,136,0.08); --accent-glow: rgba(13,148,136,0.16); /* Nav */ --nav-bg: rgba(255,255,255,0.96); --nav-border: rgba(0,0,0,0.08); /* Hero - light mode (warm cream tint with teal) */ --hero-bg: #EBF8F6; --hero-text: #0F172A; --hero-muted: #4A5568; --hero-grid-color: rgba(13,148,136,0.05); --hero-scroll-text: rgba(0,0,0,0.28); /* Serif font stack */ --font-serif: 'EB Garamond', 'Garamond', 'Georgia', serif; /* Font */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } [data-theme="dark"] { --bg: #060E18; --bg-alt: #0A1628; --surface: #0D1B2A; --surface-2: #112236; --surface-3: #1A3048; --border: rgba(45,212,191,0.11); --border-strong: rgba(45,212,191,0.27); --text: #F0F9FF; --text-muted: #94A3B8; --text-dim: #4B6A7D; --shadow-sm: 0 1px 3px rgba(0,0,0,0.30); --shadow-md: 0 4px 16px rgba(0,0,0,0.30); --shadow-lg: 0 10px 40px rgba(0,0,0,0.40); --accent-dim: rgba(45,212,191,0.09); --accent-glow: rgba(45,212,191,0.22); --nav-bg: rgba(6,14,24,0.96); --nav-border: rgba(45,212,191,0.10); /* Hero - dark mode */ --hero-bg: #060E18; --hero-text: #F0F9FF; --hero-muted: #94A3B8; --hero-grid-color: rgba(45,212,191,0.04); --hero-scroll-text: rgba(255,255,255,0.28); }