/* ==========================================================================
   typography.css — Editorial type system
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-forest);
}

/* Display utilities (BEM-style modifiers on headings) */
.display--hero {
  font-size: var(--text-hero);
  font-weight: var(--weight-light);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.display--xl {
  font-size: var(--text-5xl);
  line-height: 1;
}

.display--lg {
  font-size: var(--text-4xl);
  line-height: 1.25;
}

.display--md {
  font-size: var(--text-3xl);
}

.display--sm {
  font-size: var(--text-2xl);
}

/* Italic accent used in editorial pull quotes */
.display--italic {
  font-style: italic;
  font-weight: var(--weight-light);
}

/* Eyebrow / kicker */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow--gold {
  color: var(--color-gold);
}

.eyebrow--cream {
  color: var(--color-cream);
}

/* Body text variants */
.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  max-width: var(--container-text);
}

.prose {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-gray-600);
  max-width: var(--container-text);
}

.prose p + p {
  margin-top: var(--space-3);
}

.caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
}

/* Text alignment helpers */
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }