[data-theme="dark"] {
  --color-bg: #000000;
  --color-surface: #1c1c1e;
  --color-surface-alt: #2c2c2e;
  --color-text: #ffffff;
  --color-text-secondary: #98989d;
  --color-border: #38383a;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --color-bg: #f2f2f7;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f7fa;
  --color-text: #1c1c1e;
  --color-text-secondary: #8e8e93;
  --color-border: #e5e5ea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg: #000000;
    --color-surface: #1c1c1e;
    --color-surface-alt: #2c2c2e;
    --color-text: #ffffff;
    --color-text-secondary: #98989d;
    --color-border: #38383a;
    --color-overlay: rgba(0, 0, 0, 0.6);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}