/* ============================================================================ Gima's Piano — shared light/dark/auto theme tokens + toggle ---------------------------------------------------------------------------- Loaded on the public marketing pages. Same model as the dashboard + article pages: localStorage 'gp_theme' (light|auto|dark), dark = .gp-dark on . This file ONLY declares tokens + the toggle control — it never styles body or page elements, so it is safe to load on a page before that page is converted. Each page's own CSS consumes these tokens. ========================================================================= */ :root { /* Reading surfaces — LIGHT */ --bg: #f7f5f1; --surface: #ffffff; --surface-2: #f0eee9; --ink: #1b1c22; --ink-2: #4a4d57; --ink-3: #6f7280; --line: #e7e3db; --accent: #2E76C7; --accent-strong: #4C9EF3; --accent-bg: #eaf2fd; --accent-border: #cfe2fb; --shadow-sm: 0 1px 2px rgba(20,30,50,.05), 0 1px 3px rgba(20,30,50,.04); --shadow-md: 0 4px 12px rgba(20,30,50,.07), 0 1px 3px rgba(20,30,50,.04); --shadow-lg: 0 14px 40px rgba(20,30,50,.10), 0 4px 12px rgba(20,30,50,.05); --logo-filter: none; /* Toggle segments — LIGHT */ --seg-bg: #efece6; --seg-border: #e0dcd3; --seg-active: #ffffff; --seg-ink: #1b1c22; --seg-dim: #6f7280; } html.gp-dark { color-scheme: dark; --bg: oklch(0.17 0.015 260); --surface: oklch(0.21 0.015 260); --surface-2: oklch(0.19 0.015 260); --ink: oklch(0.96 0.010 260); --ink-2: oklch(0.80 0.012 260); --ink-3: oklch(0.65 0.012 260); --line: rgba(255,255,255,0.10); --accent: #6db4ff; --accent-strong: #4C9EF3; --accent-bg: rgba(76,158,243,0.12); --accent-border: rgba(76,158,243,0.35); --logo-filter: brightness(0) invert(1); --seg-bg: rgba(255,255,255,0.06); --seg-border: rgba(255,255,255,0.12); --seg-active: rgba(255,255,255,0.16); --seg-ink: #ffffff; --seg-dim: rgba(255,255,255,0.55); } /* Light / Auto / Dark segmented toggle (matches dashboard + article pages) */ .gph-theme-toggle { display: inline-flex; background: var(--seg-bg); border: 1px solid var(--seg-border); border-radius: 8px; padding: 2px; gap: 1px; } .gph-theme-toggle button { width: 28px; height: 28px; border: 0; border-radius: 6px; display: grid; place-items: center; background: transparent; color: var(--seg-dim); cursor: pointer; padding: 0; transition: background .15s, color .15s; } .gph-theme-toggle button.is-active { background: var(--seg-active); box-shadow: var(--shadow-sm); color: var(--seg-ink); } .gph-theme-toggle svg { width: 14px; height: 14px; display: block; } /* Floating variant — for pages with no nav bar (e.g. lead-magnet landings) */ .gph-theme-toggle--float { position: fixed; top: 14px; right: 14px; z-index: 9999; }