@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #101820;
    --color-surface: #162331;
    --color-text: #f2f6fa;
    --color-muted: #b7c4d1;
    --color-border: #31475f;
    --color-primary: #8dc8ff;
    --color-primary-contrast: #102033;
  }
}

:root[data-theme="dark"] {
  --color-background: #101820;
  --color-surface: #162331;
  --color-text: #f2f6fa;
  --color-muted: #b7c4d1;
  --color-border: #31475f;
  --color-primary: #8dc8ff;
  --color-primary-contrast: #102033;
}

:root[data-theme="light"] {
  --color-primary: #0f4c81;
  --color-primary-contrast: #ffffff;
  --color-background: #f7fafc;
  --color-surface: #ffffff;
  --color-text: #1f2933;
  --color-muted: #52616b;
  --color-border: #d9e2ec;
}