/* Design tokens: one accent, four status hues, everything else neutral. Both themes are declared here; `prefers-color-scheme` picks the default and the header toggle stamps data-theme on to override it in either direction. */ :root { color-scheme: light dark; --bg: #f5f7f9; --surface: #ffffff; --surface-sunk: #eef1f5; --fg: #16202c; --fg-muted: #5a6a7d; --fg-faint: #8a99a9; --line: #dde3ea; --line-strong: #c3cddb; --accent: #0e8f86; --accent-fg: #ffffff; --accent-soft: #d8f2ef; --ok: #17803d; --ok-soft: #dcf5e4; --warn: #a35a00; --warn-soft: #fdeed6; --bad: #c0332b; --bad-soft: #fbe3e1; --live: #0b6fb8; --live-soft: #dceefb; --idle: #64748b; --idle-soft: #e7ecf2; --radius: 10px; --radius-s: 7px; --radius-l: 14px; --shadow: 0 1px 2px rgb(15 27 40 / .06), 0 6px 20px -12px rgb(15 27 40 / .28); --rail: 232px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "JetBrains Mono", Consolas, "SFMono-Regular", "Liberation Mono", monospace; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1319; --surface: #141c24; --surface-sunk: #101820; --fg: #e6edf4; --fg-muted: #9fb0c1; --fg-faint: #6d8091; --line: #223040; --line-strong: #33465b; --accent: #2dd4bf; --accent-fg: #04231f; --accent-soft: #0d3b38; --ok: #4ade80; --ok-soft: #10301d; --warn: #fbbf24; --warn-soft: #362508; --bad: #f87171; --bad-soft: #391616; --live: #56b6f5; --live-soft: #0c2b41; --idle: #94a3b8; --idle-soft: #1b2531; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -14px rgb(0 0 0 / .8); } } /* The manual toggle wins over the media query in both directions. */ :root[data-theme="light"] { color-scheme: light; --bg: #f5f7f9; --surface: #fff; --surface-sunk: #eef1f5; --fg: #16202c; --fg-muted: #5a6a7d; --fg-faint: #8a99a9; --line: #dde3ea; --line-strong: #c3cddb; --accent: #0e8f86; --accent-fg: #fff; --accent-soft: #d8f2ef; --ok: #17803d; --ok-soft: #dcf5e4; --warn: #a35a00; --warn-soft: #fdeed6; --bad: #c0332b; --bad-soft: #fbe3e1; --live: #0b6fb8; --live-soft: #dceefb; --idle: #64748b; --idle-soft: #e7ecf2; --shadow: 0 1px 2px rgb(15 27 40 / .06), 0 6px 20px -12px rgb(15 27 40 / .28); } :root[data-theme="dark"] { color-scheme: dark; --bg: #0d1319; --surface: #141c24; --surface-sunk: #101820; --fg: #e6edf4; --fg-muted: #9fb0c1; --fg-faint: #6d8091; --line: #223040; --line-strong: #33465b; --accent: #2dd4bf; --accent-fg: #04231f; --accent-soft: #0d3b38; --ok: #4ade80; --ok-soft: #10301d; --warn: #fbbf24; --warn-soft: #362508; --bad: #f87171; --bad-soft: #391616; --live: #56b6f5; --live-soft: #0c2b41; --idle: #94a3b8; --idle-soft: #1b2531; --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -14px rgb(0 0 0 / .8); }