/* ─────────────────────────────────────────────────────
   OSUS Typography System
   ───────────────────────────────────────────────────── */

/* ── Headings ──────────────────────────────────────── */

.h-display {
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.h1 {
  font-size: var(--text-5xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.h2 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.h3 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.h4 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.h5 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

.h6 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
}

/* ── Body ──────────────────────────────────────────── */

.body-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
}

.body-base {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.body-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ── Labels / Utility ──────────────────────────────── */

.label-lg {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.label-sm {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Section Labels ────────────────────────────────── */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--orange);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
}

.section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  color: var(--navy);
  margin-bottom: var(--space-4);
}

.section-title--light {
  color: var(--text-on-dark);
}

.section-subtitle {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--text-secondary);
  max-width: 60ch;
}

.section-subtitle--light {
  color: var(--sage-80);
}

/* ── Color utilities ───────────────────────────────── */

.text-navy     { color: var(--navy); }
.text-sage     { color: var(--sage); }
.text-orange   { color: var(--orange); }
.text-burgundy { color: var(--burgundy); }
.text-light    { color: var(--text-on-dark); }
.text-secondary { color: var(--text-secondary); }
.text-muted    { color: var(--text-tertiary); }