:root {
  /* Colors */
  --color-navy: #123047;
  --color-teal: #0E8074;
  --color-whatsapp: #25D366;
  --color-whatsapp-dark: #1DA851;
  --color-accent: #F4A340;
  --color-bg: #F7FAF9;
  --color-white: #FFFFFF;
  --color-text: #17212B;
  --color-text-secondary: #5F6B73;
  --color-border: #DDE6E3;
  --color-success-bg: #EAF7F3;

  --color-navy-dark: #0C2233;
  --color-teal-dark: #0A6459;

  /* Typography */
  --font-heading: 'Manrope', 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', 'DM Sans', sans-serif;

  --fs-hero: clamp(2.625rem, 3.6vw + 1.4rem, 3.75rem);
  --fs-section: clamp(1.75rem, 2.5vw + 1rem, 3rem);
  --fs-card-heading: clamp(1.125rem, 1vw + 0.9rem, 1.5rem);
  --fs-body: clamp(1.0625rem, 0.25vw + 0.95rem, 1.125rem);
  --fs-small: clamp(0.75rem, 0.2vw + 0.7rem, 0.875rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Layout */
  --max-width: 1280px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(18, 48, 71, 0.06), 0 1px 3px rgba(18, 48, 71, 0.08);
  --shadow-md: 0 4px 12px rgba(18, 48, 71, 0.08), 0 2px 4px rgba(18, 48, 71, 0.06);
  --shadow-lg: 0 12px 32px rgba(18, 48, 71, 0.12), 0 4px 8px rgba(18, 48, 71, 0.06);

  --header-height: 76px;
  --header-height-scrolled: 64px;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}