/* ============================================================
   JMR — TYPOGRAPHY TOKENS
   Display: Cormorant Garamond (elegant, reverent, timeless)
   UI/Body: Inter (modern, clear, accessible)
   Scale per brand spec. rem base = 16px.
   ============================================================ */

:root {
  /* Families */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Weights */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */

  /* ---- Type scale (px values from brand spec) ---- */
  --fs-hero:      3rem;     /* 48px — Cormorant Bold, hero display */
  --fs-h1:        2.5rem;   /* 40px — Cormorant Bold */
  --fs-h2:        2rem;     /* 32px — Cormorant SemiBold */
  --fs-h3:        1.5rem;   /* 24px — Inter SemiBold */
  --fs-h4:        1.25rem;  /* 20px — Inter SemiBold */
  --fs-body-lg:   1.125rem; /* 18px — Inter Regular */
  --fs-body:      1rem;     /* 16px — Inter Regular */
  --fs-small:     0.875rem; /* 14px — Inter Regular */
  --fs-caption:   0.75rem;  /* 12px — Inter Regular */

  /* ---- Line heights ---- */
  --lh-tight:     1.1;   /* @kind font */
  --lh-snug:      1.25;  /* @kind font */
  --lh-normal:    1.5;   /* @kind font */
  --lh-relaxed:   1.65;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tight:     -0.01em; /* @kind font */
  --ls-normal:    0;       /* @kind font */
  --ls-wide:      0.02em;  /* @kind font */
  --ls-eyebrow:   0.14em;  /* @kind font */
}

/* ---- Type role helpers (optional, consumers may use vars directly) ---- */
.jmr-hero    { font-family: var(--font-display); font-weight: var(--fw-bold);     font-size: var(--fs-hero);    line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.jmr-h1      { font-family: var(--font-display); font-weight: var(--fw-bold);     font-size: var(--fs-h1);      line-height: var(--lh-tight); }
.jmr-h2      { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h2);      line-height: var(--lh-snug); }
.jmr-h3      { font-family: var(--font-body);    font-weight: var(--fw-semibold); font-size: var(--fs-h3);      line-height: var(--lh-snug); }
.jmr-h4      { font-family: var(--font-body);    font-weight: var(--fw-semibold); font-size: var(--fs-h4);      line-height: var(--lh-snug); }
.jmr-body-lg { font-family: var(--font-body);    font-weight: var(--fw-regular);  font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.jmr-body    { font-family: var(--font-body);    font-weight: var(--fw-regular);  font-size: var(--fs-body);    line-height: var(--lh-normal); }
.jmr-small   { font-family: var(--font-body);    font-weight: var(--fw-regular);  font-size: var(--fs-small);   line-height: var(--lh-normal); }
.jmr-caption { font-family: var(--font-body);    font-weight: var(--fw-regular);  font-size: var(--fs-caption); line-height: var(--lh-normal); }
.jmr-eyebrow { font-family: var(--font-body);    font-weight: var(--fw-semibold); font-size: var(--fs-caption); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

/* Scripture / verse styling — display italic, the brand's signature voice */
.jmr-verse   { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-medium); font-size: var(--fs-h2); line-height: var(--lh-snug); }