/* ============================================================
   TYPOGRAPHY — Chestermere Mobile Massage
   Display: Cormorant Garamond — an elegant Roman serif echoing the
            CHESTERMERE wordmark (classic, spa-refined).
   UI/Body: Mulish — soft humanist sans, pairs with rounded corners.
   Label:   Mulish in wide tracked caps, echoing "MOBILE MASSAGE INC".

   NOTE: No brand font files were supplied. These are Google Fonts
   substitutes chosen to match the logo's lettering. Flagged to user.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  /* Families */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:    'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label:   'Mulish', system-ui, sans-serif;

  /* Type scale (rem; 1rem = 16px) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  3rem;      /* 48 */
  --text-4xl:  4rem;      /* 64 */

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

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-label:  0.22em;  /* the wide-caps eyebrow look */

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