:root {
  /* Dark Mode - Default */
  --surface: #101415;
  --surface-dim: #101415;
  --surface-bright: #363a3b;
  --surface-container-lowest: #0b0f10;
  --surface-container-low: #191c1e;
  --surface-container: #1d2022;
  --surface-container-high: #272a2c;
  --surface-container-highest: #323537;
  --on-surface: #e0e3e5;
  --on-surface-variant: #c6c6cd;
  --inverse-surface: #e0e3e5;
  --inverse-on-surface: #2d3133;
  --outline: #909097;
  --outline-variant: #45464d;
  --surface-tint: #bec6e0;
  --primary: #bec6e0;
  --on-primary: #283044;
  --primary-container: #0f172a;
  --on-primary-container: #798098;
  --inverse-primary: #565e74;
  --secondary: #4edea3;
  --on-secondary: #003824;
  --secondary-container: #00a572;
  --on-secondary-container: #00311f;
  --tertiary: #adc6ff;
  --on-tertiary: #002e6a;
  --tertiary-container: #00163a;
  --on-tertiary-container: #357df1;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --background: #101415;
  --on-background: #e0e3e5;
  --surface-variant: #323537;
  
  /* Spacing */
  --spacing-base: 8px;
  --container-max: 1280px;
  --gutter: 24px;
  --margin-mobile: 20px;
  --margin-desktop: 64px;
  --stack-sm: 16px;
  --stack-md: 20px;
  --stack-lg: 80px;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  
  /* Typography */
  --font-headline: 'Hanken Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-code: 'Geist', 'JetBrains Mono', monospace;
  
  /* Transitions */
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
}

[data-theme="light"] {
  --surface: #f8f9ff;
  --surface-dim: #cbdbf5;
  --surface-bright: #f8f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #eff4ff;
  --surface-container: #e5eeff;
  --surface-container-high: #dce9ff;
  --surface-container-highest: #d3e4fe;
  --on-surface: #0b1c30;
  --on-surface-variant: #3c4a42;
  --inverse-surface: #213145;
  --inverse-on-surface: #eaf1ff;
  --outline: #6c7a71;
  --outline-variant: #bbcabf;
  --surface-tint: #006c49;
  --primary: #006c49;
  --on-primary: #ffffff;
  --primary-container: #10b981;
  --on-primary-container: #00422b;
  --inverse-primary: #4edea3;
  --secondary: #565e74;
  --on-secondary: #ffffff;
  --secondary-container: #dae2fd;
  --on-secondary-container: #5c647a;
  --tertiary: #5c5f61;
  --on-tertiary: #ffffff;
  --tertiary-container: #a0a3a5;
  --on-tertiary-container: #36393b;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --background: #f8f9ff;
  --on-background: #0b1c30;
  --surface-variant: #d3e4fe;
}