/* ===========================================================================
   Asunshine MedSpa — Typography tokens
   Display/headlines: Georgia (serif, confident, calm, used sparingly, near-black).
   Body/UI: Arial / system sans (clean, readable).
   Both are SYSTEM fonts — no webfont files ship with this system. See readme.
   Rule (deck §03): two type sizes per surface unless intentional; never stack
   three weights on one screen.
   =========================================================================== */
:root {
  /* ---- Families ---- */
  --font-display: Georgia, "Times New Roman", serif;
  --font-body: Arial, Helvetica, "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* ---- Weights (restraint: regular + one bold; avoid a third) ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---- Type scale (rem, 16px base). Serif display set large + airy. ---- */
  --text-xs:   0.75rem;   /* 12px — legal, disclaimers ("Individual results may vary") */
  --text-sm:   0.875rem;  /* 14px — meta, captions, footnotes */
  --text-base: 1rem;      /* 16px — body */
  --text-md:   1.125rem;  /* 18px — lead body */
  --text-lg:   1.375rem;  /* 22px — sub-headings */
  --text-xl:   1.75rem;   /* 28px — section headings */
  --text-2xl:  2.25rem;   /* 36px — page headings */
  --text-3xl:  3rem;      /* 48px — hero */
  --text-4xl:  4rem;      /* 64px — oversized display */

  /* ---- Line heights ---- */
  --leading-tight: 1.15;   /* display headlines */
  --leading-snug: 1.3;     /* sub-heads */
  --leading-normal: 1.6;   /* body copy */

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em;  /* large Georgia display */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;    /* small-caps eyebrows / labels */

  /* ---- Semantic roles ---- */
  --type-hero:     var(--weight-regular) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--weight-regular) var(--text-2xl)/var(--leading-tight) var(--font-display);
  --type-h2:       var(--weight-regular) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-h3:       var(--weight-bold) var(--text-lg)/var(--leading-snug) var(--font-body);
  --type-lead:     var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --type-body:     var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-meta:     var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-eyebrow:  var(--weight-bold) var(--text-sm)/1.2 var(--font-body);  /* + tracking-wide, uppercase */
}