/* Satstats theming system: Light / Dark / High-Contrast, one token set. Restrained neutral surfaces + a single amber accent. Colours live ONLY here; components consume the semantic tokens below (never hard-coded hex). Mode resolution: :root = Light (default) @media prefers-color-scheme:dark on :root:not([data-theme]) = follows OS when set to Auto :root[data-theme="light"|"dark"|"hc"] = explicit choice (wins over OS) The toggle in theme.js sets/clears data-theme on . */ :root { /* neutral surfaces */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #eef0f3; --raised: #ffffff; --border: #e3e5ea; --border-strong: #cdd0d7; --bw: 1px; /* base border width (2px in HC) */ /* text */ --text: #16171b; --muted: #5c6069; --faint: #898e98; /* brand + semantic */ --accent: #d97706; /* amber 600 */ --accent-ink: #ffffff; /* text on accent */ --pos: #0a7d3b; --neg: #c4322b; --warn: #b4690e; /* data series (vaults / charts) */ --epoch: #2f6df6; --onebtc: #d97706; --sats: #0a7d3b; --strike: #c4322b; --rake: #7c3aed; /* protocol rake — purple, distinct from strike red */ --grid: #ececf0; --focus: #2f6df6; /* effects */ --shadow: 0 1px 2px rgba(16,17,27,.06), 0 6px 24px rgba(16,17,27,.06); --topbar: rgba(246,247,249,.82); color-scheme: light; } /* Explicit Dark + OS-dark when on Auto */ :root[data-theme="dark"], :root[data-theme="dark"] body { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } :root[data-theme="dark"], :root:not([data-theme]) {} /* keep specificity anchor */ :root[data-theme="dark"] { --bg: #0b0c0e; --surface: #141619; --surface-2: #1b1e22; --raised: #191c20; --border: #262a30; --border-strong: #363c44; --bw: 1px; --text: #e9ebee; --muted: #9aa0ab; --faint: #6b7078; --accent: #f5a524; --accent-ink: #16171b; --pos: #3ecb7d; --neg: #ff6b6b; --warn: #f5a524; --epoch: #5b9dff; --onebtc: #f5a524; --sats: #4ecb8d; --strike: #ff6b6b; --rake: #a78bfa; /* protocol rake — purple, distinct from strike red */ --grid: #23262c; --focus: #5b9dff; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35); --topbar: rgba(11,12,14,.82); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: #0b0c0e; --surface: #141619; --surface-2: #1b1e22; --raised: #191c20; --border: #262a30; --border-strong: #363c44; --text: #e9ebee; --muted: #9aa0ab; --faint: #6b7078; --accent: #f5a524; --accent-ink: #16171b; --pos: #3ecb7d; --neg: #ff6b6b; --warn: #f5a524; --epoch: #5b9dff; --onebtc: #f5a524; --sats: #4ecb8d; --strike: #ff6b6b; --rake: #a78bfa; --grid: #23262c; --focus: #5b9dff; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35); --topbar: rgba(11,12,14,.82); } } /* High Contrast: black canvas, white ink, max-contrast accents, hard borders, no shadows/translucency. Follows platform HC conventions. */ :root[data-theme="hc"] { --bg: #000000; --surface: #000000; --surface-2: #000000; --raised: #000000; --border: #ffffff; --border-strong: #ffffff; --bw: 2px; --text: #ffffff; --muted: #ffffff; --faint: #e6e6e6; --accent: #ffd400; --accent-ink: #000000; --pos: #00e676; --neg: #ff5252; --warn: #ffd400; --epoch: #40c4ff; --onebtc: #ffd400; --sats: #00e676; --strike: #ff5252; --rake: #e0aaff; /* protocol rake — bright lavender, distinct on black */ --grid: #4d4d4d; --focus: #ffff00; --shadow: none; --topbar: #000000; color-scheme: dark; } :root[data-theme="hc"] * { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; } :root[data-theme="hc"] :focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; } /* ---- The theme toggle (segmented control, injected by theme.js) ---- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0; padding: 2px; border: var(--bw) solid var(--border); background: var(--surface-2); font: 500 11px/1 inherit; font-family: inherit; letter-spacing: 0.5px; user-select: none; } .theme-toggle button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; padding: 5px 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .theme-toggle button:hover { color: var(--text); } .theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 700; } .theme-toggle button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* Labels are the only content (the mode icons were removed), so they must stay visible at every width; tighten the padding instead of hiding them. */ @media (max-width: 560px) { .theme-toggle { font-size: 10px; } .theme-toggle button { padding: 5px 6px; } }