:root {
  color-scheme: light;
  --bg: #f8fafc;
  --surface: #fff;
  --text: #1e293b;
  --muted: #526176;
  --border: #e2e8f0;
  --input-border: #cbd5e1;
  --placeholder: #64748b;
  --subtle: #f1f5f9;
  --hover: #fbfdff;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --on-primary: #fff;
  --active: #edf3ff;
  --teal: #0f766e;
  --teal-soft: #e7f5f0;
  --danger: #b91c1c;
  --info-bg: #eff6ff;
  --info-text: #1e40af;
  --info-border: #dbeafe;
  --error-bg: #fff1f2;
  --error-border: #fecaca;
  --violet: #7c3aed;
  --violet-soft: #f3f0ff;
  --amber: #b45309;
  --amber-soft: #fff7ed;
  --chart-bar: #b8cef9;
  --scrim: #0f172a70;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1220;
  --surface: #131e30;
  --text: #e5edf7;
  --muted: #a8b8ce;
  --border: #2c3c53;
  --input-border: #526781;
  --placeholder: #99abc3;
  --subtle: #1c2a40;
  --hover: #1a293f;
  --primary: #79aaff;
  --primary-dark: #a3c4ff;
  --on-primary: #0b1930;
  --active: #203658;
  --teal: #5edac5;
  --teal-soft: #153d3c;
  --danger: #ffaaa8;
  --info-bg: #192f50;
  --info-text: #b0ceff;
  --info-border: #365782;
  --error-bg: #431f2c;
  --error-border: #824152;
  --violet: #c2a7ff;
  --violet-soft: #30254c;
  --amber: #f4c17c;
  --amber-soft: #3b2c20;
  --chart-bar: #5d8edc;
  --scrim: #020617b8;
}
.theme-select {
  min-height: 44px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.theme-select:hover { background: var(--subtle); }
.theme-select:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }