:root {
  /* Colors */
  --color-blue-dark: #0f172a; /* Slate 900 */
  --color-blue-primary: #2563eb; /* Blue 600 */
  --color-blue-light: #60a5fa; /* Blue 400 */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-100: #f1f5f9;
  --color-gray-800: #1e293b;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-blue-dark), var(--color-blue-primary));
  --gradient-secondary: linear-gradient(135deg, var(--color-black), var(--color-blue-dark));
  
  /* Typography */
  --font-primary: 'Inter', system-ui, sans-serif;
  
  /* Spacing Grid (8px) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 15px rgba(37, 99, 235, 0.5);
}

/* Dark mode overrides (if we want to go full dark theme by default, adjusting bases) */
body {
  background-color: var(--color-gray-100);
  color: var(--color-gray-800);
}

body.dark-mode {
  background-color: var(--color-black);
  color: var(--color-white);
}