/* Light/dark theme — light palette + perpetual toggle. Dark is the default (styles.css :root). Light kicks in when the element carries data-theme="light". Toggle UI is injected by theme.js as a fixed-position button. */ /* ─── Light-mode palette ───────────────────────────────────────── */ html[data-theme="light"] { --bg-page: #E7D0F4; --bg-raised: #DDBFEA; --bg-sidebar: #D0ABE0; --bg-card: #DDBFEA; --bg-inset: #C8A8D7; --bg-elevated: #D0ABE0; --border: #B58FCD; --border-dashed: #C8A8D7; --text-primary: #3B2C55; --text-secondary: #6B5C82; --text-tertiary: #7E6F95; --text-faint: #91839F; --gold: #e19951; --gold-hover: #f2ac6c; --gold-text-soft: #c27d3c; } /* sticky-nav uses an rgba(49,16,59,...) tint after the sweep — lighten in light mode */ html[data-theme="light"] nav, html[data-theme="light"] .site-nav, html[data-theme="light"] .topbar { background: color-mix(in srgb, var(--bg-page) 55%, white 45%); } /* table hover/zebra rgba(255,214,98,.10) is too hot on lilac — soften */ html[data-theme="light"] { --gold-tint: rgba(207, 186, 116, .14); } /* ─── Toggle button — fixed, top-right corner. */ .theme-toggle { position: fixed; top: 10px; right: 12px; z-index: 1000; background: transparent; border: 0; color: var(--gold); font-size: 12px; line-height: 1; cursor: pointer; padding: 5px 7px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; opacity: .55; transition: opacity .15s, background .15s, color .15s; } .theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; outline: none; background: rgba(0, 0, 0, .12); } html[data-theme="light"] .theme-toggle:hover, html[data-theme="light"] .theme-toggle:focus-visible { background: rgba(0, 0, 0, .08); } .theme-toggle i { font-size: 16px; } @media (max-width: 720px) { .theme-toggle { top: 8px; right: 8px; padding: 4px 6px; } .theme-toggle i { font-size: 15px; } }