/* ============================================================ Light mode — Cool Mist Activated by ``. Defaults to dark. ============================================================ */ html[data-theme="light"] { --bg: #EDF2FA; /* cool mist page */ --bg-raised: #F5F8FC; --surface: #FAF7EC; /* warm cream cards — complement to cool mist */ --surface-2: #F4F0DE; /* nested inputs/stat — deeper warm cream */ --surface-3: #EDE7CD; /* pressed/hovered input */ --border: #E2DBC2; --border-strong: #CFC5A4; --border-subtle: #EDE7D2; --text: #1A1F2E; /* deep navy-black */ --text-strong: #0A0F1C; --text-muted: #5A6478; --text-subtle: #8A93A7; --text-faint: #B4BBCC; /* Gold tints bumped for light bg legibility */ --gold-tint-04: rgba(212, 167, 44, 0.08); --gold-tint-08: rgba(212, 167, 44, 0.14); --gold-tint-15: rgba(212, 167, 44, 0.22); --gold-tint-25: rgba(212, 167, 44, 0.38); --gold-tint-40: rgba(212, 167, 44, 0.55); /* Shadows — gold-tinted so cards feel warm + lifted */ --shadow-sm: 0 1px 2px rgba(140, 105, 20, 0.08); --shadow-md: 0 4px 20px rgba(140, 105, 20, 0.10), 0 1px 2px rgba(26, 31, 46, 0.04); --shadow-lg: 0 12px 40px rgba(140, 105, 20, 0.14), 0 2px 6px rgba(26, 31, 46, 0.06); } /* Ambient glow softer on light */ html[data-theme="light"] body::before { background: radial-gradient(circle at 85% -10%, rgba(212, 167, 44, 0.10), transparent 55%), radial-gradient(circle at 10% 110%, rgba(212, 167, 44, 0.08), transparent 45%); } /* Nav translucent mist in light */ html[data-theme="light"] .nav { background: rgba(237, 242, 250, 0.82); } /* Cards get a lift shadow in light mode (no shadow in dark by default) */ html[data-theme="light"] .card { box-shadow: var(--shadow-sm); } html[data-theme="light"] .card-pad-lg { box-shadow: var(--shadow-md); } /* Swap PaperOS wordmark for light theme */ html[data-theme="light"] .nav-wordmark-img-dark { display: none; } html[data-theme="light"] .nav-wordmark-img-light { display: block; } /* ---------- Theme toggle button icons ---------- */ .theme-toggle .theme-sun { display: block; } .theme-toggle .theme-moon { display: none; } html[data-theme="light"] .theme-toggle .theme-sun { display: none; } html[data-theme="light"] .theme-toggle .theme-moon { display: block; } .theme-toggle { position: relative; transition: transform var(--t-base) var(--ease); } .theme-toggle:active { transform: rotate(20deg) scale(0.9); }