/* Light/dark theme — light palette + perpetual toggle. Dark is the default (existing :root vars). Light kicks in when the element carries data-theme="light". Toggle UI lives in the ticker bar on every page. */ /* ─── Light-mode palette ───────────────────────────────────────── Lilac bg → olive accent. Sage-palette migration 2026-06-25: was orange (#e19951) before, now dark olive (#484e3c) to pair with the new dark-mode sage (#c2c7b7). Body + meta purples stay — dark-purple-on-lilac is highly readable. Accent-ink uses lilac for high-contrast white-on-olive button text. */ html[data-theme="light"] { --bg: #E7D0F4; --surface: #DDBFEA; --surface-2: #D0ABE0; --line: #B58FCD; --line-soft: #C8A8D7; --text: #484e3c; --text-2: #3B2C55; --text-3: #544570; /* WCAG AA ≥4.5:1 on #E7D0F4 lilac */ --accent: #484e3c; --accent-ink:#E7D0F4; } /* ─── Light-mode header chrome — lighter grey bar + ticker. Each page's inline `.bar { background: rgba(26,17,36,.7) }` and `.ticker { background: rgba(26,17,36,.95) }` would otherwise render as a dark gray tint on the lavender page. We lighten the page bg with white to put the bar/ticker ABOVE the page (lighter grey), keeping the existing nav text + button styles which all read fine on this tone. color-mix means an A/B palette swap auto-tracks. */ html[data-theme="light"] .bar { background: color-mix(in srgb, var(--bg) 55%, white 45%); } html[data-theme="light"] .ticker { background: color-mix(in srgb, var(--bg) 65%, white 35%); } /* The ticker is positioned so the toggle can anchor inside it. */ .ticker { position: relative; } .theme-toggle { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 2; background: transparent; border: 0; color: var(--accent); font-size: 12px; line-height: 1; cursor: pointer; padding: 4px 6px; 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: 14px; } @media (max-width: 480px) { .theme-toggle { left: 6px; padding: 3px 5px; } .theme-toggle i { font-size: 13px; } } /* ─── Skip-to-content link (injected by theme.js as first body child) ─── */ .skip-link { position: absolute; top: -100px; left: 0; z-index: 1000; padding: 12px 18px; background: var(--accent); color: var(--accent-ink); font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-decoration: none; border-radius: 0 0 6px 6px; transition: top .2s; } .skip-link:focus { top: 0; outline: 2px solid var(--accent); outline-offset: 0; } /* ─── Mobile toggle ────────────────────────────────────────── theme.js injects a second .theme-toggle.theme-toggle-mobile next to .bar .brand so phones get a comfortable tap target instead of the cramped marquee one. Hidden on desktop. 44×44 minimum touch target. */ .theme-toggle-mobile { position: static; transform: none; margin-left: 8px; padding: 0; width: 44px; height: 44px; font-size: 14px; display: none; /* hidden by default; shown at mobile breakpoint */ opacity: .75; } .theme-toggle-mobile i { font-size: 20px; } @media (max-width: 720px) { .ticker .theme-toggle { display: none; } .theme-toggle-mobile { display: inline-flex; } } /* ─── Video controls overlay (injected by theme.js) ────────── theme.js wraps every