/* Grain Design System — Typography Utilities
 *
 * Three typographic voices. The families below are the ones the tokens
 * actually resolve to — read --sol-font-serif / --sol-font-sans /
 * --sol-font-code in the spine for the exact stacks. This header named the
 * three superseded families for four releases after they stopped shipping, and
 * grain's own showcase repeated it to every contributor who opened it.
 *
 *   Source Serif 4 (serif) — The Narrative voice. Anything written to a person:
 *                            summaries, completion messages, headlines.
 *   Archivo (sans)         — The Functional voice. Labels, controls, figures,
 *                            system text, UI chrome.
 *   System mono            — The Data voice. Anything read character by
 *                            character: code, commits, ids, timestamps.
 */

/* ── Base Typography ────────────────────────────────────── */

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── The Narrative Voice — serif for narrative & display ─── */

.display-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Narrative — partner text, summaries, insights */
.narrative-voice {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  line-height: 1.72;
  letter-spacing: -0.01em;
}

/* Narrative emphasis — handwritten annotation feel */
.narrative-emphasis {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ── The Functional Voice — sans for functional UI ───────── */

/* Small caps — section labels, metadata headers */
.small-caps {
  font-variant-caps: all-small-caps;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

/* ── The Data Voice — mono for raw data ──────────────────── */

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Text Hierarchy ──────────────────────────────────────── */

.text-secondary {
  color: var(--ink-secondary);
}

.text-tertiary {
  color: var(--ink-tertiary);
}

.text-muted {
  color: var(--text-muted);
}

.text-faint {
  color: var(--text-faint);
}