/* ============================================================
   Renovaré — Typography Tokens
   Display = Kepler Display (headlines, pull quotes, big moments)
   Serif   = Kepler (formal longform, blockquotes)
   Sans    = DM Sans (UI, body, labels, captions)
   ⚠ In an inline style="…" the font-family value MUST use single
     quotes — the double quote is the attribute delimiter.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "kepler-3-display-variable", "Playfair Display", Georgia, serif;
  --font-serif:   "kepler-3", "kepler-3-display-variable", "Playfair Display", Georgia, serif;
  --font-sans:    "dm-sans", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* ---- Type scale (rem, 16px base) ---- */
  --text-2xs:  0.625rem;  /* 10px — micro meta */
  --text-xs:   0.75rem;   /* 12px — meta / eyebrow */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px — body */
  --text-lg:   1.125rem;  /* 18px — button / lead */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */
  --text-6xl:  3.75rem;   /* 60px */
  --text-7xl:  4.5rem;    /* 72px */
  --text-8xl:  6rem;      /* 96px — hero */

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

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;  /* meta / eyebrow caps */
  --tracking-wider:  0.08em;

  /* ============================================================
     Semantic roles
     ============================================================ */
  --display-1:   var(--text-8xl);
  --display-2:   var(--text-7xl);
  --heading-1:   var(--text-6xl);
  --heading-2:   var(--text-5xl);
  --heading-3:   var(--text-4xl);
  --heading-4:   var(--text-3xl);
  --heading-5:   var(--text-xl);
  --heading-6:   var(--text-lg);
  --body-lg:     var(--text-xl);
  --body:        var(--text-base);
  --body-sm:     var(--text-sm);
  --eyebrow:     var(--text-xs);
}