:root {
  color-scheme: light;
  --spx-bg: #fffaf5;
  --spx-surface: #ffffff;
  --spx-muted-surface: #f7ece4;
  --spx-text: #211d1a;
  --spx-text-muted: #665c56;
  --spx-border: #d9c8bc;
  --spx-accent: #fe5000;
  --spx-accent-text: #a93600;
  --spx-on-accent: #211008;
  --spx-focus: #a93600;
  --spx-success: #167044;
  --spx-warning: #8a5200;
  --spx-danger: #b4233c;
  --spx-info: #23639a;
  --spx-overlay: rgb(33 29 26 / 72%);
  --spx-shadow: 0 16px 48px rgb(77 42 20 / 12%);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --spx-bg: #171412;
  --spx-surface: #211d1a;
  --spx-muted-surface: #30251f;
  --spx-text: #fff7f1;
  --spx-text-muted: #c2b4aa;
  --spx-border: #59463b;
  --spx-accent: #ff875e;
  --spx-accent-text: #ffab87;
  --spx-on-accent: #211008;
  --spx-focus: #ffab87;
  --spx-success: #6bd9a2;
  --spx-warning: #ffc56e;
  --spx-danger: #ff9dad;
  --spx-info: #8dc9f5;
  --spx-overlay: rgb(0 0 0 / 78%);
  --spx-shadow: 0 16px 48px rgb(0 0 0 / 32%);
}
.spx-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--spx-border);
  border-radius: 12px;
  background: var(--spx-muted-surface);
  color: var(--spx-accent-text);
  font: 700 21px/1 system-ui, sans-serif;
  cursor: pointer;
}
.spx-theme-toggle:hover { border-color: var(--spx-accent); }
.spx-theme-toggle:focus-visible { outline: 3px solid var(--spx-focus); outline-offset: 3px; }
.spx-theme-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}