:root {
  --navy-900: #0B2A4A;
  --navy-700: #14467A;
  --navy-500: #1E5A9C;
  --aqua-500: #3BA9D9;
  --aqua-300: #8FD3EE;
  --aqua-100: #D9EFF9;
  --cream-50: #F6F8FB;
  --white: #FFFFFF;
  --ink-900: #0F1A2B;
  --ink-600: #4A5A6E;
  --ink-400: #8A96A6;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --max-width: 1200px;
  --content-padding: 1.25rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(11, 42, 74, 0.08);
  --shadow-strong: 0 20px 60px rgba(11, 42, 74, 0.18);
  --shadow-card: 0 8px 24px rgba(11, 42, 74, 0.12);

  --nav-height: 76px;
  --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  :root {
    --content-padding: 2rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --content-padding: 3rem;
  }
}