@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,600;14..32,700&family=Nunito+Sans:opsz,wght@6..12,700&display=swap');

:root {
  /* Brand Colors */
  --color-primary: #0f172a;
  --color-primary-mid: #1e293b;
  --color-primary-light: #2d3f5e;
  --color-accent: #0c71c3;
  --color-accent-light: #38a5f5;
  --color-accent-hover: #0a5fa3;
  --color-white: #ffffff;
  --color-off-white: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-700: #334155;
  --color-text: #1e293b;
  --color-text-light: #64748b;

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, #0c71c3 0%, #38a5f5 100%);
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  --gradient-hero: linear-gradient(105deg, #0f172a 55%, rgba(15,23,42,0.7) 100%);
  --gradient-cta: linear-gradient(135deg, #0c71c3 0%, #0a3d6e 100%);

  /* Typography */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --fs-display: clamp(3rem, 6.5vw, 5.5rem);
  --fs-hero: clamp(2.5rem, 5vw, 4.25rem);
  --fs-h1: clamp(2rem, 3.5vw, 3rem);
  --fs-h2: clamp(1.5rem, 2.5vw, 2.25rem);
  --fs-h3: clamp(1.1rem, 1.8vw, 1.35rem);
  --fs-subtitle: clamp(1rem, 1.4vw, 1.15rem);
  --fs-body-lg: clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-stat: clamp(2.25rem, 4vw, 3.25rem);
  --line-height: 1.7;

  /* Spacing */
  --section-py: clamp(4rem, 9vw, 7rem);
  --container-max: 1200px;
  --container-px: clamp(1.25rem, 4vw, 2.5rem);
  --gap-xs: 0.5rem;
  --gap-sm: 1rem;
  --gap-md: 1.75rem;
  --gap-lg: 2.5rem;
  --gap-xl: 4rem;

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 180ms var(--ease);
  --transition-base: 300ms var(--ease);
  --transition-slow: 500ms var(--ease);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.07);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  --shadow-accent: 0 8px 32px rgba(12,113,195,0.35);

  /* White overlays (for dark backgrounds) */
  --white-5: rgba(255,255,255,0.05);
  --white-8: rgba(255,255,255,0.08);
  --white-10: rgba(255,255,255,0.1);
  --white-12: rgba(255,255,255,0.12);
  --white-18: rgba(255,255,255,0.18);
  --white-22: rgba(255,255,255,0.22);
  --white-35: rgba(255,255,255,0.35);
  --white-45: rgba(255,255,255,0.45);
  --white-50: rgba(255,255,255,0.5);
  --white-65: rgba(255,255,255,0.65);
  --white-70: rgba(255,255,255,0.7);
  --white-75: rgba(255,255,255,0.75);
  --white-82: rgba(255,255,255,0.82);
  --white-88: rgba(255,255,255,0.88);

  /* Dark overlays */
  --black-8: rgba(0,0,0,0.08);
  --black-40: rgba(0,0,0,0.4);
  --black-60: rgba(0,0,0,0.6);
  --black-72: rgba(0,0,0,0.72);

  /* Brand color overlays */
  --overlay-dark: rgba(10,25,47,0.45);
  --overlay-dark-heavy: rgba(10,25,47,0.82);
  --overlay-dark-mid: rgba(10,25,47,0.55);
  --overlay-dark-light: rgba(10,25,47,0.30);
  --overlay-dark-strong: rgba(10,25,47,0.75);
  --overlay-short: rgba(15,23,42,0.92);
  --overlay-short-light: rgba(15,23,42,0.65);
  --overlay-card: rgba(10,18,36,0.93);
  --overlay-modal: rgba(5,12,28,0.88);

  /* Accent overlays */
  --accent-10: rgba(12,113,195,0.1);
  --accent-12: rgba(12,113,195,0.12);
  --accent-15: rgba(12,113,195,0.15);
  --accent-25: rgba(56,165,245,0.25);
  --accent-30: rgba(12,113,195,0.3);
  --accent-light-15: rgba(56,165,245,0.15);
  --accent-light-20: rgba(56,165,245,0.2);

  /* Borders */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Header */
  --header-height: 56px;
}