/* * Bowcast theme layer: dark-mode token overrides. * * The light tokens live in each page's base stylesheet (styles.css / * landing.css). This file only swaps their VALUES when data-theme="dark" is set * on (by the inline theme-init script, before first paint). Same * variable names, two temperatures: light is the paper almanac, dark is the * dusk instrument, checked when rainbows actually happen. * * Load this AFTER the page's base stylesheet so the overrides win. */ :root[data-theme="dark"] { --paper: #12151b; --paper-2: #191d26; --plaque: #1d222d; --line: #2f3644; --line-soft: #262c37; --ink: #ece7db; --ink-soft: #cfc9bd; --muted: #98a1b2; --coral: #ec7d6f; --color-none: #8b8578; --color-low: #9585ee; --color-moderate: #46b8a6; --color-good: #edb350; --color-high: #ec7d6f; --text-none: #b3ac9d; --text-low: #b3a6f5; --text-moderate: #67cbba; --text-good: #f2c06e; --text-high: #f2948a; --violet: #9585ee; --teal: #46b8a6; --amber: #edb350; --red: #ec7d6f; --accent: #9585ee; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 10px 30px rgba(0, 0, 0, .55); /* Faux-basemap surfaces (the landing map illustration) */ --map-land: #161b23; --map-water: #10141b; --map-road: #252b36; } /* The page background follows the theme with a gentle cross-fade. */ html { background: var(--paper); transition: background .4s ease; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } /* ── Theme toggle switch ─────────────────────────────────── */ .theme-toggle { position: relative; width: 62px; height: 34px; flex-shrink: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); cursor: pointer; padding: 0; } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle .tt-icon { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; } .theme-toggle .tt-sun { left: 9px; } .theme-toggle .tt-moon { right: 9px; } .theme-toggle .tt-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--plaque); box-shadow: var(--shadow-sm); display: flex; align-items: center; justify-content: center; color: var(--accent); transition: left .26s cubic-bezier(.22, .61, .36, 1); } :root[data-theme="dark"] .theme-toggle .tt-knob { left: 33px; } /* Compact icon variant for dense headers (map, content pages). */ .theme-mini { background: transparent; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--ink); line-height: 1; min-width: 44px; min-height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .15s, border-color .15s, color .15s; } .theme-mini:hover { background: var(--paper-2); } .theme-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { html, .theme-toggle .tt-knob { transition: none; } }