/* ========================================================================== Dark Mode — warm dark palette Activated by [data-theme="dark"] on ========================================================================== */ [data-theme="dark"] { --color-bg: #1A1614; --color-bg-warm: #221E1B; --color-bg-card: #252220; --color-bg-card-hover: #2D2926; --color-surface: #2A2622; --color-text: #F0EBE5; --color-text-secondary: #A89E95; --color-text-muted: #7A7068; --color-primary: #C86A44; --color-primary-hover: #D47A54; --color-primary-light: #8B6550; --color-primary-glow: rgba(200, 106, 68, 0.15); --color-accent: #96A088; --color-accent-light: #7D8471; --color-border: #3A3430; --color-border-light: #2E2A26; --color-border-focus: var(--color-primary); --color-success: #6EA076; --color-error: #D06858; --color-warning: #D4A343; --color-info: #6B8FB0; --shadow-sm: 0 1px 3px rgba(26, 22, 20, 0.3); --shadow-md: 0 4px 12px rgba(26, 22, 20, 0.35); --shadow-lg: 0 8px 30px rgba(26, 22, 20, 0.4); --shadow-glow: 0 0 0 3px var(--color-primary-glow); } /* Grain overlay — reduce in dark mode */ [data-theme="dark"] body::before { opacity: 0.02; } /* Glassmorphism header — darker tint */ [data-theme="dark"] header { background: rgba(26, 22, 20, 0.85); border-bottom-color: var(--color-border); } /* Images — slight brightness reduction to avoid eye strain */ [data-theme="dark"] img { filter: brightness(0.92); } /* Inputs — dark background */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--color-bg-warm); color: var(--color-text); border-color: var(--color-border); } /* Theme toggle icon swap */ [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline; } [data-theme="light"] .theme-toggle .icon-sun { display: inline; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-moon { display: none; }