/* Shared semantic surfaces: no component decides its own light/dark palette. */
:root {
  color-scheme: light;
  --theme-bg: #f5f7ff;
  --theme-surface: #ffffff;
  --theme-raised: #e9eefb;
  --theme-stage: #edf1fa;
  --theme-text: #121627;
  --theme-muted: #526079;
  --theme-line: #c8d1e4;
  --theme-focus: #2045e8;
  --theme-accent-text: #2045e8;
  --theme-selected: #e5eaff;
  --theme-live: #276335;
  --theme-live-bg: #e6f4df;
  --theme-danger: #a32243;
  --theme-danger-bg: #ffe8ef;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --theme-bg: #101321;
  --theme-surface: #1b2032;
  --theme-raised: #272e43;
  --theme-stage: #161c2c;
  --theme-text: #edf1ff;
  --theme-muted: #abb8d0;
  --theme-line: #46516c;
  --theme-focus: #a9baff;
  --theme-accent-text: #b8c6ff;
  --theme-selected: #26355c;
  --theme-live: #b1eb9b;
  --theme-live-bg: #293d30;
  --theme-danger: #ffc3cf;
  --theme-danger-bg: #51313f;
}
:root {
  accent-color: #2045e8;
  scrollbar-color: var(--theme-line) var(--theme-bg);
}
[data-theme-toggle] {
  -webkit-app-region: no-drag;
  flex-shrink: 0;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--theme-line);
  border-radius: 12px;
  background: var(--theme-surface);
  color: var(--theme-text);
  font: 700 12px var(--ui, sans-serif);
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--theme-focus);
  outline-offset: 3px;
}
@media (prefers-contrast: more) {
  :root {
    --theme-line: #657392;
    --theme-muted: #303a53;
  }
  :root[data-theme='dark'] {
    --theme-line: #9aaac8;
    --theme-muted: #d3dcf0;
  }
}