/* Candidate palettes, kept while the scheme decision is open. Teal Lightning is pinned site-wide via a static data-palette="teal" on (interim default, 2026-07-26); the picker UI is not loaded (preview-palettes.js kept in the repo but unreferenced). To finalize or re-enable the picker, see PLAN.md § Temporary. Each palette overrides the token set from main.css. "copper" is the main.css default (no data-palette attribute). Dark variants apply only via the nav toggle (data-theme="dark") — the site defaults to light for everyone, matching main.css. */ /* ---------- Dodger Blue (LA Dodgers — #005A9C) ---------- */ :root[data-palette="dodger"] { --bg: #f7f9fc; --bg-subtle: #eaf0f7; --text: #14263a; --text-secondary: #5d7186; --hairline: rgba(20, 38, 58, 0.14); --accent: #005a9c; --accent-strong: #004879; --accent-contrast: #ffffff; --nav-bg: rgba(247, 249, 252, 0.8); } :root[data-palette="dodger"][data-theme="dark"] { --bg: #0a1a2a; --bg-subtle: #122840; --text: #e6eef7; --text-secondary: #9db4c9; --hairline: rgba(230, 238, 247, 0.15); --accent: #58a6e8; --accent-strong: #79b9ef; --accent-contrast: #06192b; --nav-bg: rgba(10, 26, 42, 0.72); } /* ---------- Teal Lightning (#041421 #042630 #4c7273 #86b9b0 #d0d6d6) ---------- */ :root[data-palette="teal"] { --bg: #eef1f1; --bg-subtle: #e0e6e6; --text: #041421; --text-secondary: #4c7273; --hairline: rgba(4, 20, 33, 0.15); --accent: #4c7273; --accent-strong: #395c5d; --accent-contrast: #ffffff; --nav-bg: rgba(238, 241, 241, 0.8); } :root[data-palette="teal"][data-theme="dark"] { --bg: #041421; --bg-subtle: #042630; --text: #d0d6d6; --text-secondary: #7d9a98; --hairline: rgba(208, 214, 214, 0.16); --accent: #86b9b0; --accent-strong: #a3ccc4; --accent-contrast: #041421; --nav-bg: rgba(4, 20, 33, 0.72); } /* ---------- Forest Mist (#001b2e #1d3f58 #537692 #b3cde4 #eef3f9) ---------- */ :root[data-palette="forest"] { --bg: #eef3f9; --bg-subtle: #dfe8f2; --text: #001b2e; --text-secondary: #537692; --hairline: rgba(0, 27, 46, 0.14); --accent: #1d3f58; --accent-strong: #001b2e; --accent-contrast: #ffffff; --nav-bg: rgba(238, 243, 249, 0.8); } :root[data-palette="forest"][data-theme="dark"] { --bg: #001b2e; --bg-subtle: #12324b; --text: #eef3f9; --text-secondary: #8fa9c0; --hairline: rgba(238, 243, 249, 0.15); --accent: #b3cde4; --accent-strong: #d1e3f2; --accent-contrast: #001b2e; --nav-bg: rgba(0, 27, 46, 0.72); } /* ---------- Ceiling Blues (#051827 #214457 #386994 #8eaebb #bdd9cd) ---------- */ :root[data-palette="ceiling"] { --bg: #f1f6f4; --bg-subtle: #e1ebe6; --text: #051827; --text-secondary: #547082; --hairline: rgba(5, 24, 39, 0.14); --accent: #386994; --accent-strong: #214457; --accent-contrast: #ffffff; --nav-bg: rgba(241, 246, 244, 0.8); } :root[data-palette="ceiling"][data-theme="dark"] { --bg: #051827; --bg-subtle: #11293c; --text: #e4ede9; --text-secondary: #8eaebb; --hairline: rgba(228, 237, 233, 0.15); --accent: #bdd9cd; --accent-strong: #d4e8de; --accent-contrast: #051827; --nav-bg: rgba(5, 24, 39, 0.72); } /* ---------- The picker bar (inert while preview-palettes.js is unloaded) ---------- */ .palette-preview { position: fixed; top: 4.25rem; right: 1rem; z-index: 30; display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--hairline); border-radius: 980px; } .palette-preview-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); } .palette-preview button { appearance: none; padding: 0; width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform 0.15s var(--ease), border-color 0.15s var(--ease); } .palette-preview button:hover { transform: scale(1.15); } .palette-preview button[aria-pressed="true"] { border-color: var(--text); }