:root {
  /* colors - refined dark mode */
  --color-background-page: #0a0a0a;
  --color-background-header: #111111;
  --color-background-content: #000000;
  
  /* Glassmorphism / Subtle Gradient Cards */
  --color-card-background: linear-gradient(145deg, #161616 0%, #1a1a1a 100%);
  --color-card-background-hover: linear-gradient(145deg, #1a1a1a 0%, #202020 100%);
  
  --color-text: #ffffff;
  --color-text-header: #f0f0f0;
  --color-text-muted: #a1a1aa; /* Neutral gray */
  
  /* Professional Blue Accent */
  --color-accent: #3b82f6;
  --color-accent-hover: #60a5fa;
  --color-accent-light: #93c5fd;
  
  --color-link: #60a5fa;
  --color-link-hover: #93c5fd;
  
  --color-border: #27272a; /* Subtle border */
  --color-shadow: rgba(0, 0, 0, 0.7);
  
  /* spacing - existing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  
  /* layout spacing tokens */
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.5rem;
  --gap-lg: 2rem;
  --gap-xl: 3rem;
  
  --padding-card: var(--space-lg);
  --padding-section: var(--space-xl);
  
  /* fonts - cleaner stack */
  --font-family: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-heading: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 16px;
  --font-size-heading: 2.5rem;
  --font-size-subheading: 1.5rem;
  
  /* grid system */
  --grid-columns: 12;
  --grid-gap: var(--gap-md);
  --content-max-width: 1400px;
  
  /* breakpoints */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* Light mode overrides - Clean & Crisp */
body.light-mode {
  --color-background-page: #fafafa;
  --color-background-header: #ffffff;
  --color-background-content: #ffffff;
  
  --color-card-background: #ffffff;
  --color-card-background-hover: #f8fafc;
  
  --color-text: #18181b;
  --color-text-header: #09090b;
  --color-text-muted: #52525b;
  
  --color-accent: #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-light: #3b82f6;
  
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;
  
  --color-border: #e4e4e7;
  --color-shadow: rgba(0, 0, 0, 0.05);
}