/* ============================================================
   RecMom — TYPOGRAPHY TOKENS  [PLACEHOLDER fonts]
   Display: Fjalla One — SINGLE WEIGHT (400). Hierarchy from
   size + case, never weight. Body: Source Sans 3 (400/600/700).
   Mobile-first scale. Desktop scales display/h1/h2 up ~25-40%.
   ============================================================ */
:root {
  --font-display: "Fjalla One", "Arial Narrow", sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, sans-serif;

  /* Weights */
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type scale: size / line-height pairs ---- */
  --text-display-size: 40px; --text-display-lh: 44px; /* Hero */
  --text-h1-size: 32px;      --text-h1-lh: 36px;
  --text-h2-size: 24px;      --text-h2-lh: 28px;
  --text-h3-size: 20px;      --text-h3-lh: 26px;
  --text-eyebrow-size: 14px; --text-eyebrow-lh: 18px;
  --text-body-size: 16px;    --text-body-lh: 24px;
  --text-small-size: 14px;   --text-small-lh: 20px;
  --text-caption-size: 12px; --text-caption-lh: 16px;
  --text-button-size: 16px;  --text-button-lh: 16px;
  --text-chip-size: 14px;    --text-chip-lh: 14px;

  /* Tracking */
  --tracking-eyebrow: 0.08em;
  --tracking-button:  0.04em;
}

/* ---- Reusable text-style classes (optional sugar over tokens) ---- */
.rm-display { font-family: var(--font-display); font-weight: 400; font-size: var(--text-display-size); line-height: var(--text-display-lh); }
.rm-h1      { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h1-size); line-height: var(--text-h1-lh); }
.rm-h2      { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h2-size); line-height: var(--text-h2-lh); }
.rm-h3      { font-family: var(--font-display); font-weight: 400; font-size: var(--text-h3-size); line-height: var(--text-h3-lh); }
.rm-eyebrow { font-family: var(--font-body); font-weight: 700; font-size: var(--text-eyebrow-size); line-height: var(--text-eyebrow-lh); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.rm-body    { font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.rm-body-strong { font-family: var(--font-body); font-weight: 600; font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.rm-small   { font-family: var(--font-body); font-weight: 400; font-size: var(--text-small-size); line-height: var(--text-small-lh); }
.rm-caption { font-family: var(--font-body); font-weight: 400; font-size: var(--text-caption-size); line-height: var(--text-caption-lh); }
.rm-button  { font-family: var(--font-body); font-weight: 700; font-size: var(--text-button-size); line-height: var(--text-button-lh); letter-spacing: var(--tracking-button); text-transform: uppercase; }
.rm-chip    { font-family: var(--font-body); font-weight: 600; font-size: var(--text-chip-size); line-height: var(--text-chip-lh); }