/* ========================================================================== theme-toggle.css — shared theme plumbing for the static portal pages (2026-06-09). Loaded by index.html, policies/*.html and 404.html AFTER styles/tokens.css (which is auto-generated — never edit it directly). 1. Bridge tokens: --bg-dark / --bg-marketing / --bg-card / --bg-card-hover / --text-marketing-* / --accent-gold were referenced by the pages but defined nowhere (they resolved to transparent/inherit — see the 2026-05-19 cookie-banner comment in index.html). Point them at the tokens.css semantic layer so they resolve in light mode AND flip automatically under .dark. 2. The 3-state theme toggle (system | light | dark) — vanilla replica of the 21st.dev "efferd" segmented control, rendered into placeholders by /scripts/theme-toggle.js. 3. Dark-mode patches for the hardcoded light backgrounds in the shared policies/*.html style block (six copied files — patched once here). ========================================================================== */ :root { /* tokens.css (marketing flavor, 2026-06-09 regen) now owns the 19 named marketing aliases; only the gaps + deliberate divergences live here. */ --bg-marketing: var(--surface-background); --border: var(--outline); --ring: var(--surface-brand); /* Gold from the accent ramp — restores the .announcement strong intent (index.html Phase 7 follow-up comment); accent-300 (not the generated accent-400) stays readable on the fixed dark-teal banner gradient in both modes — visually verified 2026-06-09. */ --accent-gold: var(--color-accent-300); /* Green for the .specialty-card.new "NEW" ribbon (white text). The semantic flips success-600 → success-500 under .dark, unlike the generated fixed success-500 — keeps AA for the white ribbon text in light mode. */ --accent-green: var(--surface-success); } /* Native form controls / scrollbars follow the active theme. The inline boot snippet also sets documentElement.style.colorScheme. */ .dark { color-scheme: dark; } /* --- Theme toggle (segmented radiogroup) -------------------------------- */ .theme-toggle { position: relative; display: inline-flex; align-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: color-mix(in oklch, var(--surface-subtle) 80%, transparent); animation: theme-toggle-in 0.3s ease; } @keyframes theme-toggle-in { from { opacity: 0; } to { opacity: 1; } } .theme-toggle button { position: relative; z-index: 1; display: flex; width: 28px; height: 28px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-secondary); cursor: pointer; transition: color 0.15s ease; } .theme-toggle button:hover, .theme-toggle button[aria-checked="true"] { color: var(--text-primary); } .theme-toggle button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .theme-toggle svg { width: 14px; height: 14px; display: block; } /* Active-segment indicator — slides between the three 28px segments via translateX set from theme-toggle.js; the overshooting cubic-bezier mimics the original framer-motion spring (bounce 0.1). */ .theme-toggle-indicator { position: absolute; top: 0; left: 0; width: 28px; height: 28px; box-sizing: border-box; border: 1px solid color-mix(in oklch, var(--text-secondary) 50%, transparent); border-radius: 6px; pointer-events: none; transition: transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1); } @media (prefers-reduced-motion: reduce) { .theme-toggle-indicator { transition: none; } } /* --- Per-page mounts ----------------------------------------------------- */ /* policies/*.html: row holding the back-link and the toggle. */ .policy-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 24px; } .policy-toolbar .policy-back { margin-bottom: 0; } /* 404.html: pin the toggle to the top-right corner. */ .theme-toggle-corner { position: fixed; top: 16px; right: 16px; } /* --- Dark patches for the shared policy style block ---------------------- */ .dark .policy-version, .dark .policy-content blockquote { background: var(--surface-elevated); } .dark .policy-content code, .dark .policy-content th { background: var(--surface-subtle); }