/* ===========================================================================
   TYPOGRAPHY
   Display: Playfair Display — high-contrast editorial Didone serif (matches the
   all-caps + italic headlines across the clinic's Instagram creatives).
   Body: Mulish — quiet humanist sans, easy long-form reading.
   NOTE: loaded via Google Fonts (see fonts.css / <link> in each HTML file).
   Confirm the exact body family from the live site — see readme caveats.
   =========================================================================== */
:root {
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: var(--font-sans);

  /* Type scale — editorial, generous. rem = 16px base. */
  --text-xs:   0.75rem;    /* 12 — legal / micro labels */
  --text-sm:   0.8125rem;  /* 13 — eyebrows, captions */
  --text-base: 1rem;       /* 16 — body min */
  --text-md:   1.125rem;   /* 18 — lede body */
  --text-lg:   1.375rem;   /* 22 — large body / small headings */
  --text-xl:   1.75rem;    /* 28 */
  --text-2xl:  2.25rem;    /* 36 */
  --text-3xl:  3rem;       /* 48 */
  --text-4xl:  4rem;       /* 64 */
  --text-5xl:  5.25rem;    /* 84 — hero display */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-display: 1.06;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.78;

  /* Tracking */
  --tracking-eyebrow: 0.18em;   /* uppercase small-caps labels */
  --tracking-caps:    0.08em;
  --tracking-tight:  -0.02em;   /* large display */
  --tracking-normal:  0;

  /* Semantic roles */
  --font-heading: var(--font-display);
  --font-eyebrow: var(--font-sans);
}