:root {
  /* Brand colors — sampled from the updated Havvo Clinic logo (teal badge) */
  --color-brand: #287F8F;
  --color-brand-dark: #1C5863;
  --color-brand-light: #48B6CB;
  --color-brand-tint: #EAF3F5;

  --color-bg: #FFFFFF;
  --color-bg-soft: #F7F4EC;
  --color-ink: #14191B;
  --color-ink-soft: #4A5457;
  --color-line: #E4E1D8;
  --color-cream: #F7F4EC;

  /* Typography */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero: clamp(2.75rem, 5.5vw, 5.5rem);
  --fs-h2: clamp(2.25rem, 3.6vw, 3.5rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2rem);
  --fs-lead: clamp(1.125rem, 1.4vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;
  --space-3xl: 11rem;

  --container-w: 1240px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.35s;
  --dur-med: 0.7s;
  --dur-slow: 1.1s;
}

/* The large section-spacing tokens (xl/2xl/3xl) give the desktop layout its
   spacious, premium feel, but the same fixed rem values leave mobile screens
   mostly empty padding between sections. Scale them down at narrower
   widths — font sizes already do this via clamp(), spacing didn't. */
@media (max-width: 900px) {
  :root {
    --space-xl: 3.5rem;
    --space-2xl: 5.5rem;
    --space-3xl: 7rem;
  }
}

@media (max-width: 640px) {
  :root {
    --space-xl: 2.75rem;
    --space-2xl: 4rem;
    --space-3xl: 5rem;
  }
}