:root {
  --bg: #fff;
  --text: #111;
  --text-secondary: #767676;
  --text-muted: #555;
  --surface: #f7f7f7;
  --surface-hover: #efefef;
  --surface-hover-alt: #ebebeb;
  --divider: #f0f0f0;
  --border-input: #e8e8e8;
  --border-stepper: #ccc;
  --btn-primary-bg: #111;
  --btn-primary-bg-hover: #222;
  --btn-primary-color: #fff;
  --btn-disabled-bg: #f0f0f0;
  --btn-disabled-color: #adabab;
  --toggle-off: #ddd;
  --segment-slider-bg: #fff;
  --segment-color: #4f4e4e;
  --select-arrow: %23aaa;
  --wrong-pill-bg: #fef2f2;
  --wrong-pill-color: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --text: #f0f0f0;
    --text-secondary: #888;
    --text-muted: #aaa;
    --surface: #1e1e1e;
    --surface-hover: #2a2a2a;
    --surface-hover-alt: #2a2a2a;
    --divider: #2a2a2a;
    --border-input: #2e2e2e;
    --border-stepper: #444;
    --btn-primary-bg: #f0f0f0;
    --btn-primary-bg-hover: #d8d8d8;
    --btn-primary-color: #111;
    --btn-disabled-bg: #2a2a2a;
    --btn-disabled-color: #555;
    --toggle-off: #444;
    --segment-slider-bg: #2e2e2e;
    --segment-color: #aaa;
    --select-arrow: %23666;
    --wrong-pill-bg: #2a1a1a;
    --wrong-pill-color: #f87171;
  }
}