:root {
  color-scheme: light dark;
  --border: light-dark(#E5E5E5, #262626);
  --brand-primary: light-dark(#6B46C1, #9F7AEA);
  --brand-secondary: light-dark(#737373, #A3A3A3);
  --destructive: light-dark(#EF4444, #F87171);
  --duration-fast: 120ms;
  --duration-normal: 240ms;
  --font-body: Inter;
  --font-heading: Cormorant Garamond;
  --font-mono: JetBrains Mono;
  --info: light-dark(#3B82F6, #60A5FA);
  --neutral-default: light-dark(#A3A3A3, #525252);
  --neutral-strong: light-dark(#171717, #FAFAFA);
  --neutral-subtle: light-dark(#F5F5F5, #171717);
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --radius-sm: 4px;
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --space-lg: 24px;
  --space-md: 16px;
  --space-sm: 8px;
  --space-xl: 40px;
  --space-xs: 4px;
  --success: light-dark(#10B981, #34D399);
  --surface-bg: light-dark(#FFFFFF, #0F0F0F);
  --surface-card: light-dark(#F8F8F8, #1A1A1A);
  --text-primary: light-dark(#0F0F0F, #FAFAFA);
  --text-secondary: light-dark(#525252, #A3A3A3);
  --warning: light-dark(#F59E0B, #FBBF24);
}

@supports not (color: light-dark(red, blue)) {
  @media (prefers-color-scheme: dark) {
    :root {
    --border: #262626;
    --brand-primary: #9F7AEA;
    --brand-secondary: #A3A3A3;
    --destructive: #F87171;
    --info: #60A5FA;
    --neutral-default: #525252;
    --neutral-strong: #FAFAFA;
    --neutral-subtle: #171717;
    --success: #34D399;
    --surface-bg: #0F0F0F;
    --surface-card: #1A1A1A;
    --text-primary: #FAFAFA;
    --text-secondary: #A3A3A3;
    --warning: #FBBF24;
    }
  }
}