:root {
  /* Brand */
  --c-navy: #395D7F;
  --c-navy-deep: #395D7F; /* same as --c-navy; kept as a hook in case we want a hover-only shade */
  --c-sage: #88BC86;
  --c-orange: #E28E4A;
  --c-text: #222222;
  --c-microcopy: #6b7c8d;

  /* Backgrounds */
  --bg-radial: radial-gradient(50% 50% at 50% 50%, #F2F8FF 0%, #D9E7F6 100%);

  /* Placeholders (icons / images TK) */
  --c-pink-placeholder: #F8C3CC;
  --c-pink-outline: #e89aa7;

  /* Type */
  --ff-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-script: 'Caveat', cursive;
  --fs-nav: 14px;
  --fs-h1: clamp(28px, 4.2vw, 46px);
  --fs-sub: clamp(15px, 1.2vw, 16px);
  --fs-micro: 12px;
  --lh-tight: 1.2;
  --lh-base: 1.6;

  /* Layout */
  --container: 1360px;
  --gutter: clamp(20px, 4vw, 48px);
  --header-h: 78px;

  /* Shape */
  --radius-pill: 999px;
  --radius-md: 12px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
}