/* ========================================================================== DARKMODE.CSS — Dark theme token overrides Applied via [data-theme="dark"] on , set by js/darkmode.js (system preference detected on first load, user choice persists after). ========================================================================== */ [data-theme="dark"] { --bg-canvas: #0B1618; --bg-surface: #101C1F; --bg-surface-2: #16262A; --bg-inverse: #050D0F; --text-primary: #EDEFEA; --text-secondary: #9FADAC; --text-inverse: #EDEFEA; --border-subtle: #223032; --accent-primary: var(--c-teal-400); --accent-primary-hover: var(--c-teal-500); --accent-cta: var(--c-brass-400); --accent-cta-hover: var(--c-brass-500); --glass-bg: rgba(11, 22, 24, 0.68); --glass-border: rgba(255,255,255,0.08); --shadow-color: 200deg 60% 2%; color-scheme: dark; } [data-theme="dark"] .card, [data-theme="dark"] .tile, [data-theme="dark"] .form-field input, [data-theme="dark"] .form-field textarea, [data-theme="dark"] .form-field select, [data-theme="dark"] .theme-toggle, [data-theme="dark"] .nav-toggle { background: var(--bg-surface); } [data-theme="dark"] .badge--solid { background: var(--bg-surface-2); } [data-theme="dark"] .region-card, [data-theme="dark"] .section--inverse { background: linear-gradient(155deg, #0A1618, #050D0F); } [data-theme="dark"] .hero__scrim { background: linear-gradient(0deg, rgba(3,10,11,0.97) 0%, rgba(3,10,11,0.78) 38%, rgba(3,10,11,0.4) 68%, rgba(3,10,11,0.6) 100%), linear-gradient(100deg, rgba(3,10,11,0.6) 0%, rgba(3,10,11,0.05) 55%); }