/* ============================================================
   UNDERSTORY — TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: "National 2 Condensed", "Oswald", "Arial Narrow", sans-serif;
  --font-serif:   "PP Editorial New", "Playfair Display", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

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

  /* ---- Fluid display scale ---- */
  --text-display:  clamp(3rem, 8vw, 6rem);
  --text-h1:       clamp(2.4rem, 6vw, 4.25rem);
  --text-h2:       clamp(2rem, 4.6vw, 3.25rem);
  --text-h3:       clamp(1.6rem, 3.2vw, 2.4rem);
  --text-h4:       clamp(1.3rem, 2.2vw, 1.75rem);

  /* ---- Body scale ---- */
  --text-xl:   1.5rem;
  --text-lg:   1.25rem;
  --text-md:   1.0625rem;
  --text-base: 1rem;
  --text-sm:   0.875rem;
  --text-xs:   0.75rem;

  /* ---- Line heights ---- */
  --lh-tight:   0.96;
  --lh-snug:    1.12;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---- Tracking ---- */
  --ls-display: -0.01em;
  --ls-caps:    0.04em;
  --ls-body:    0em;

  /* ---- Semantic roles ---- */
  --type-display-font: var(--font-display);
  --type-body-font:    var(--font-body);
  --type-numeric-font: var(--font-serif);
}

/* Reusable helpers -------------------------------------------------- */
.u-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.u-serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}
.u-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-caps);
  color: var(--text-primary);
}
.u-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}