/* ============================================================
   Everlit Candle — Typography System  (from handoff/, reconciled)
   Load AFTER tokens.css + site.css so the type scale wins.
   Fonts: Cormorant Garamond + Figtree — already loaded by each
   page's existing <link>, so no @import here (avoids a 2nd fetch).

   RECONCILED FOR THIS CODEBASE:
   - `--bg` from the handoff (#1A1712, warm brown) is intentionally
     NOT set here — the site's evergreen `--bg: #0C1310` (tokens.css)
     is preserved. Changing the site background is a palette decision;
     flip it in tokens.css if you actually want the warmer ground.
   - `--ink` (#EDE7DA) already equals the existing `--text-hi`.
   ============================================================ */

:root {
  /* families (aliases onto the existing token names) */
  --font-serif: var(--font-display);
  --font-sans:  var(--font-body);

  /* text color on the dark warm ground */
  --ink:   #EDE7DA;  /* headings (warm cream)       */
  --body:  #EDE7DA;  /* body copy (warm cream)      */
  --muted: #8A968C;  /* eyebrows / meta · AA ~5.6:1 */

  /* fluid DISPLAY scale — landing/hero sections, bumped ~20% */
  --h1: clamp(3.24rem, 7.2vw, 5.52rem);
  --h2: clamp(2.4rem, 4.8vw, 3.72rem);
  /* stepped-down scale for TEXT-DENSE pages (legal, FAQ) — opt in with
     class="text-dense" so fine print doesn't get a hero-sized masthead */
  --h-title:   clamp(2.4rem, 4.8vw, 3.3rem);      /* page title   */
  --h-section: clamp(1.65rem, 2.64vw, 1.92rem);   /* section head */
  --text-body: 1.35rem;   /* 21.6px — long-form reading (min 19px) */
  --text-meta: 1rem;      /* 16px min — labels only      */
}

body {
  color: var(--body);
  font: 400 var(--text-body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font: 500 var(--h1)/1.08 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.3em;
}

h2 {
  font: 500 var(--h2)/1.2 var(--font-serif);
  color: var(--ink);
  margin: 0 0 0.4em; /* explicit rhythm — never rely on 0 */
}

/* raw paragraphs inherit weight/size from body; no global margin so the
   flex-centered screen layouts aren't disturbed. Document-flow spacing is
   added only on text-dense pages below. */
p {
  color: var(--body);
}

/* small uppercase kicker / meta — 12px reserved for labels, not body */
.eyebrow,
.meta {
  font: 600 var(--text-meta)/1.6 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* emphasized word inside a heading — the brand's roman/italic contrast */
h1 em, h2 em { font-style: italic; font-weight: 500; }

/* text-dense pages (legal, FAQ): step headings down from the display scale */
.text-dense h1 {
  font: 500 var(--h-title)/1.15 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.3em;
}
.text-dense h2 {
  font: 500 var(--h-section)/1.3 var(--font-serif);
  color: var(--ink);
  margin: 0 0 0.4em;
}
.text-dense p { margin: 0 0 1em; } /* document-flow paragraph rhythm */