:root {
  color-scheme: light;

  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-secondary: #1E293B;
  --color-accent: #0EA5E9;
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-text: #0F172A;
  --color-text-muted: #64748B;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable', 'Segoe UI', 'Ubuntu', Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0F172A;
  --color-surface: #1E293B;
  --color-border: #334155;
  --color-text: #F1F5F9;
  --color-text-muted: #94A3B8;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0F172A;
    --color-surface: #1E293B;
    --color-border: #334155;
    --color-text: #F1F5F9;
    --color-text-muted: #94A3B8;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}