:root {
    color-scheme: dark;
    --bg: #0c0c0c;
    --surface: #161616;
    --surface-2: #1e1e1e;
    --band-light: #ecece9;
    --band-light-surface: #e0e0dc;
    --text: #f0f0f0;
    --text-inverse: #0c0c0c;
    --text-secondary: #d4d4d4;
    --muted: #a8a8a8;
    --text-muted: #a8a8a8;
    --muted-inverse: #525252;
    --border: #2a2a2a;
    --border-inverse: #c8c8c4;
    --accent: #c8ff00;
    --accent-dim: #a8d900;
    --accent-muted: rgba(200, 255, 0, 0.12);
    --accent-text: #0c0c0c;
    --accent-on-light: #4a6200;
    --accent-on-dark: #c8ff00;
    --header-bg: #0c0c0c;
    --hud-bg: rgba(10, 10, 10, 0.96);
    --hud-bg-panel: rgba(14, 14, 14, 0.97);
    --hud-text: #ececec;
    --hud-text-muted: #b8b8b8;
    --hero-control-bg: rgba(12, 12, 12, 0.62);
    --hero-control-bg-hover: rgba(12, 12, 12, 0.78);
    --hero-control-fg: #f0f0f0;
    --hero-control-border: rgba(255, 255, 255, 0.28);
    --grid-line: rgba(255, 255, 255, 0.06);
    --grid-line-inverse: rgba(0, 0, 0, 0.06);
    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-body: Inter, system-ui, sans-serif;
    --font-serif: "Instrument Serif", Georgia, serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f4f1;
    --surface: #ffffff;
    --surface-2: #ebebe8;
    --band-light: #0c0c0c;
    --band-light-surface: #161616;
    --text: #0c0c0c;
    --text-inverse: #f0f0f0;
    --text-secondary: #2a2a2a;
    --muted: #525252;
    --text-muted: #525252;
    --muted-inverse: #9a9a9a;
    --border: #d4d4d0;
    --border-inverse: #2a2a2a;
    --accent: #9ecc00;
    --accent-dim: #7aa800;
    --accent-muted: rgba(158, 204, 0, 0.14);
    --accent-text: #0c0c0c;
    --accent-on-light: #3d5200;
    --accent-on-dark: #9ecc00;
    --header-bg: #f4f4f1;
    --hud-bg: rgba(10, 10, 10, 0.96);
    --hud-bg-panel: rgba(14, 14, 14, 0.97);
    --hud-text: #ececec;
    --hud-text-muted: #b8b8b8;
    --hero-control-bg: rgba(12, 12, 12, 0.62);
    --hero-control-bg-hover: rgba(12, 12, 12, 0.78);
    --hero-control-fg: #f0f0f0;
    --hero-control-border: rgba(255, 255, 255, 0.28);
    --grid-line: rgba(0, 0, 0, 0.05);
    --grid-line-inverse: rgba(255, 255, 255, 0.06);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle:hover {
    color: var(--accent);
}
.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.theme-toggle__icon {
    display: none;
    width: 1.35rem;
    height: 1.35rem;
}
.theme-toggle__icon.is-active {
    display: block;
}