:root {
  color-scheme: light;
  --color-canvas: #f5f7fc;
  --color-surface: #ffffff;
  --color-text: #202b48;
  --color-muted: #52617b;
  --color-border: #d6ddea;
  --color-control-border: #75839e;
  --color-accent: #3a5ada;
  --color-accent-strong: #2946b4;
  --color-accent-soft: #edf1ff;
  --color-notice: #684900;
  --color-notice-bg: #fff4cc;
  --color-focus: #2547ca;
  --color-action: #3a5ada;
  --color-action-hover: #2946b4;
  --color-on-action: #ffffff;
  --color-danger: #8f1d1d;
  --color-danger-bg: #fff0f0;
  --color-brand-panel: #3a5ada;
  --color-on-brand: #ffffff;
  --color-brand-decoration: #6c87ff;
  --color-input-surface: #f1f4ff;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --content-width: 72rem;
  --text-width: 46rem;
  --focus-ring: 0 0 0 0.2rem var(--color-focus);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-canvas: #11182a;
    --color-surface: #1b253b;
    --color-text: #eef2ff;
    --color-muted: #b8c4de;
    --color-border: #43516e;
    --color-control-border: #8191b3;
    --color-accent: #a9bcff;
    --color-accent-strong: #d0dbff;
    --color-accent-soft: #26375e;
    --color-notice: #ffe39a;
    --color-notice-bg: #3c300f;
    --color-focus: #b5c7ff;
    --color-action: #a9bcff;
    --color-action-hover: #d0dbff;
    --color-on-action: #16213d;
    --color-danger: #ffb4b4;
    --color-danger-bg: #3d1d1d;
    --color-brand-panel: #2846b2;
    --color-input-surface: #222f4b;
  }
}