:root {
  color-scheme: light;
  --color-primary: #4338ca;
  --color-on-primary: #ffffff;
  --color-bg: #ffffff;
  --color-surface: #f8fafc;
  --color-text: #0f172a;
  --color-muted: #475569;
  --color-border: #64748b;
  --color-success: #15803d;
  --color-focus: #4f46e5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --color-primary: #a5b4fc;
  --color-on-primary: #1e1b4b;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-muted: #cbd5e1;
  --color-border: #64748b;
  --color-success: #4ade80;
  --color-focus: #a5b4fc;
  }
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --color-primary: #a5b4fc;
  --color-on-primary: #1e1b4b;
  --color-bg: #0f172a;
  --color-surface: #1e293b;
  --color-text: #f1f5f9;
  --color-muted: #cbd5e1;
  --color-border: #64748b;
  --color-success: #4ade80;
  --color-focus: #a5b4fc;
}