:root {
  --brand:         #1E6FD9;
  --brand-dark:    #1859B0;
  --brand-light:   #4A8FE8;
  --navy:          #0D1B35;
  --navy-deep:     #091525;
  --navy-mid:      #112244;
  --cream:         #F7F4F1;
  --white:         #ffffff;
  --gray-50:       #f9fafb;
  --gray-100:      #f3f4f6;
  --gray-200:      #e5e7eb;
  --gray-300:      #d1d5db;
  --gray-400:      #9ca3af;
  --gray-500:      #6b7280;
  --gray-600:      #4b5563;
  --gray-700:      #374151;
  --gray-800:      #1f2937;
  --gray-900:      #111827;
  --mesh-bg:       radial-gradient(ellipse at 12% 20%, rgba(56,189,248,0.22) 0%, transparent 48%),
                   radial-gradient(ellipse at 88% 80%, rgba(139,92,246,0.22) 0%, transparent 48%),
                   radial-gradient(ellipse at 55% 50%, rgba(30,111,217,0.10) 0%, transparent 55%),
                   #0D1B35;
  --footer-bg:     radial-gradient(ellipse at 10% 30%, rgba(56,189,248,0.12) 0%, transparent 45%),
                   radial-gradient(ellipse at 90% 70%, rgba(139,92,246,0.12) 0%, transparent 45%),
                   #091525;
  --radius-sm:     0.375rem;
  --radius:        0.75rem;
  --radius-lg:     1.25rem;
  --radius-xl:     2rem;
  --radius-full:   9999px;
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow:        0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg:     0 10px 40px rgba(0,0,0,0.12);
  --shadow-xl:     0 20px 60px rgba(0,0,0,0.18);
  --shadow-brand:  0 8px 30px rgba(30,111,217,0.35);
  --transition:    0.25s ease;
  --transition-slow: 0.4s ease;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --header-height: 72px;
}

@media (max-width: 1024px) {
  :root { --header-height: 64px; }
}

@media (max-width: 768px) {
  :root { --header-height: 60px; }
}