/* * FSD Life Tracker — colour system. * Light (default) and dark share one token set; the values swap on * prefers-color-scheme, and an explicit choice on wins. * * Semantics: --green means "FSD is active", --red means "FSD is blocked". * Interactive affordances (links, hover borders, selected nav) use --accent * so a colour never carries two meanings at once. */ :root { color-scheme: light; --bg: #ffffff; --surface: #f7f8fa; --surface-elevated: #ffffff; --border: #e3e6ec; --border-light: #cdd3dd; --text: #10141b; --text-muted: #5c6673; --text-dim: #6b7481; --green: #0a8058; --green-bright: #076b49; --green-dim: rgba(10, 128, 88, 0.10); --green-fill: rgba(10, 128, 88, 0.16); --green-edge: rgba(10, 128, 88, 0.32); --red: #c8372c; --red-bright: #a92c22; --red-dim: rgba(200, 55, 44, 0.09); --red-fill: rgba(200, 55, 44, 0.14); --red-edge: rgba(200, 55, 44, 0.30); --yellow: #a06a08; --yellow-dim: rgba(160, 106, 8, 0.12); --accent: #2f5fd8; --accent-bright: #1f47ad; --accent-dim: rgba(47, 95, 216, 0.10); --accent-fill: rgba(47, 95, 216, 0.16); --accent-edge: rgba(47, 95, 216, 0.32); --map-base: #eceef2; --map-stroke: #dadee5; --map-hover: #dfe3ea; --map-hover-stroke: #c3c9d3; --map-go: rgba(10, 128, 88, 0.42); --map-go-stroke: rgba(10, 128, 88, 0.72); --map-go-hover: rgba(10, 128, 88, 0.60); --map-stop: rgba(200, 55, 44, 0.40); --map-stop-stroke: rgba(200, 55, 44, 0.70); --map-stop-hover: rgba(200, 55, 44, 0.58); --map-selected: #8b94a1; --map-selected-stroke: #646d7a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #06080b; --surface: #0d1015; --surface-elevated: #141821; --border: #1d222b; --border-light: #2b323d; --text: #e9edf3; --text-muted: #8994a3; --text-dim: #737d8b; --green: #18d48f; --green-bright: #4ff0b1; --green-dim: rgba(24, 212, 143, 0.12); --green-fill: rgba(24, 212, 143, 0.22); --green-edge: rgba(24, 212, 143, 0.34); --red: #e8493f; --red-bright: #ff6a5e; --red-dim: rgba(232, 73, 63, 0.14); --red-fill: rgba(232, 73, 63, 0.24); --red-edge: rgba(232, 73, 63, 0.36); --yellow: #f0b429; --yellow-dim: rgba(240, 180, 41, 0.14); --accent: #7ea8ff; --accent-bright: #a6c3ff; --accent-dim: rgba(126, 168, 255, 0.12); --accent-fill: rgba(126, 168, 255, 0.22); --accent-edge: rgba(126, 168, 255, 0.34); --map-base: #111620; --map-stroke: #1c2330; --map-hover: #1b2331; --map-hover-stroke: #2e3a4c; --map-go: rgba(24, 212, 143, 0.42); --map-go-stroke: rgba(24, 212, 143, 0.70); --map-go-hover: rgba(24, 212, 143, 0.60); --map-stop: rgba(232, 73, 63, 0.42); --map-stop-stroke: rgba(232, 73, 63, 0.70); --map-stop-hover: rgba(232, 73, 63, 0.60); --map-selected: #59626f; --map-selected-stroke: #7d8796; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #06080b; --surface: #0d1015; --surface-elevated: #141821; --border: #1d222b; --border-light: #2b323d; --text: #e9edf3; --text-muted: #8994a3; --text-dim: #737d8b; --green: #18d48f; --green-bright: #4ff0b1; --green-dim: rgba(24, 212, 143, 0.12); --green-fill: rgba(24, 212, 143, 0.22); --green-edge: rgba(24, 212, 143, 0.34); --red: #e8493f; --red-bright: #ff6a5e; --red-dim: rgba(232, 73, 63, 0.14); --red-fill: rgba(232, 73, 63, 0.24); --red-edge: rgba(232, 73, 63, 0.36); --yellow: #f0b429; --yellow-dim: rgba(240, 180, 41, 0.14); --accent: #7ea8ff; --accent-bright: #a6c3ff; --accent-dim: rgba(126, 168, 255, 0.12); --accent-fill: rgba(126, 168, 255, 0.22); --accent-edge: rgba(126, 168, 255, 0.34); --map-base: #111620; --map-stroke: #1c2330; --map-hover: #1b2331; --map-hover-stroke: #2e3a4c; --map-go: rgba(24, 212, 143, 0.42); --map-go-stroke: rgba(24, 212, 143, 0.70); --map-go-hover: rgba(24, 212, 143, 0.60); --map-stop: rgba(232, 73, 63, 0.42); --map-stop-stroke: rgba(232, 73, 63, 0.70); --map-stop-hover: rgba(232, 73, 63, 0.60); --map-selected: #59626f; --map-selected-stroke: #7d8796; } /* Theme toggle control — shared by every page. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; flex-shrink: 0; background: transparent; border: 1px solid var(--border); border-radius: 6px; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--text); border-color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle svg { width: 16px; height: 16px; display: block; }