/* Light/dark theme — light palette + perpetual toggle. Dark is the default (tokens.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 ───────────────────────────────────────── Lilac bg → warm cream gold accent. Dark purples for body/meta text are highly readable on lilac. Accent-ink matches the dark page bg for visual cohesion across modes. */ html[data-theme="light"] { --bg-page: #E7D0F4; --bg-raised: #DDBFEA; --bg-sidebar: #D0ABE0; --bg-card: #DDBFEA; --bg-inset: #C8A8D7; --bg-elevated: #D0ABE0; --bg-code: #2A1E40; /* code blocks stay dark for legibility */ --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; --on-gold: #31103B; } /* Public-page nav uses rgba directly — override to a lighter purple in light mode. */ html[data-theme="light"] nav.site-nav { background: color-mix(in srgb, var(--bg-page) 55%, white 45%); } /* ─── Toggle button — fixed, top-right corner, sits above everything. */ .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; } /* In-flow toggle placed inside the dashboard page header — sits just to the right of the "dashboard" title (overrides the fixed top-right default). */ .page-head .theme-toggle { position: static; margin-right: auto; /* hug the title; keep the account-strip pushed right */ margin-left: 8px; } /* Authed shell — the dashboard hamburger sits in the top-left, sidebar covers the left, so a top-right corner button is safe. On narrow screens shift slightly inward to clear the hamburger. */ @media (max-width: 720px) { .theme-toggle { top: 8px; right: 8px; padding: 4px 6px; } .theme-toggle i { font-size: 15px; } }