/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #005BAC;       /* Primary Blue */
  --color-primary-light: #0070D2;
  --color-primary-dark: #004080;
  
  --color-secondary: #87CEEB;     /* Sky Blue */
  --color-accent: #FFD700;        /* Accent Gold */
  
  --color-white: #FFFFFF;
  --color-light-gray: #F5F7FA;
  --color-dark-gray: #333333;
  --color-dark-navy: #0A192F;
  --color-text: #2C3E50;
  --color-text-muted: #64748B;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  --gradient-overlay: linear-gradient(to right, rgba(10, 25, 47, 0.8), rgba(0, 91, 172, 0.6));
  
  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  --font-secondary: 'Inter', sans-serif;
  --font-heading: 'Playfair Display', serif;
  
  /* Shadows */
  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 15px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1);
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4.5rem;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  
  /* Transitions */
  --transition-fast: 0.2s ease-in-out;
  --transition-normal: 0.3s ease-in-out;
  --transition-slow: 0.5s ease-in-out;
}


/* Dark Mode Variables */
body.dark-mode {
  --color-white: #0a0f1d;
  --color-light-gray: #111827;
  --color-text: #e5e7eb;
  --color-text-light: #9ca3af;
  --color-secondary: #f3f4f6;
}

body.dark-mode .header {
  background: rgba(10, 15, 29, 0.95);
}
body.dark-mode .dropdown-menu {
  background: #111827;
  border-color: #374151;
}
body.dark-mode .dropdown-menu a {
  color: #e5e7eb;
}
body.dark-mode .dropdown-menu a:hover {
  background: #1f2937;
}
body.dark-mode .card {
  background: #111827;
  color: #e5e7eb;
  border: 1px solid #374151;
}
body.dark-mode input, body.dark-mode select {
  background: #1f2937;
  color: white;
  border-color: #374151;
}