/* CSS Variables - Root Level */
:root {
  /* Colors - Light Mode (Default) */
  --color-primary: #1E3A3A;
  --color-primary-light: #2C5A5A;
  --color-accent: #F5B041;
  --color-accent-dark: #D48F2B;
  --color-accent-hover: #e6a017;
  
  --color-text-primary: #2C2C2C;
  --color-text-secondary: #4B5563;
  --color-text-light: #F5F5F0;
  
  --color-bg-primary: #FAF9F6;
  --color-bg-secondary: #FFFFFF;
  --color-bg-card: #FFFFFF;
  
  --color-border: #E2E8F0;
  --color-overlay: rgba(0, 0, 0, 0.5);
  
  /* Shadows */
  --shadow-sm: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 20px 25px -12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Typography */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --fs-h1: clamp(2.2rem, 6vw, 3.8rem);
  --fs-h2: clamp(1.6rem, 4vw, 2.2rem);
  --fs-h3: clamp(1.3rem, 3vw, 1.6rem);
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-small: 0.875rem;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  
  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Dark Mode Variables */
body.dark-mode {
  --color-primary: #399393;
  --color-primary-light: #60a7a7;
  
  --color-text-primary: #E0E0E0;
  --color-text-secondary: #B0B0B0;
  --color-text-light: #FFFFFF;
  
  --color-bg-primary: #121212;
  --color-bg-secondary: #1E1E1E;
  --color-bg-card: #232323;
  
  --color-border: #333333;
  --color-overlay: rgba(0, 0, 0, 0.7);
}