/* ============================================================
   Layer 3: Typography — type utilities and showcase rows
   The type SCALE itself lives in tokens.css. This module is for
   the named type-role utilities and the showcase's type-row UI.
   ============================================================ */

/* ── Document section typography (canonical public DS) ── */
.section-heading {
  font-size: var(--text-h0); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.15;
  color: var(--primary); margin-bottom: var(--space-20);
}
.section-heading .m { color: var(--muted); }

.section-intro {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-h3); font-weight: 400; line-height: 1.4;
  color: var(--secondary); max-width: 800px;
  margin-bottom: var(--space-48); overflow: visible;
}

.section-body {
  font-size: 17px; font-weight: 400; line-height: 1.75;
  color: var(--secondary); max-width: 560px;
}

/* ── Inline word-emphasis utilities ── */
.m  { color: var(--muted); }     /* muted-word: same font/size, only colour shifts */
.ac { color: var(--accent); }    /* accent text — sage highlight */

/* ── Type spec rows (used in the type-scale showcase) ── */
.type-row {
  display: flex; align-items: flex-start; gap: var(--space-32);
  padding-bottom: var(--space-20); border-bottom: var(--rule-faint); margin-bottom: var(--space-20);
}
.type-meta { width: 160px; flex-shrink: 0; padding-top: 3px; }
.type-role { font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; color: var(--primary); letter-spacing: 0.04em; }
.type-spec { font-family: var(--font-mono); font-size: var(--text-tiny); color: var(--muted); margin-top: var(--space-4); line-height: 1.6; }