/* ═══ Typography System — semantic HTML-style classes ═══ */

/* ─── Display headings (h1-h3) — Oswald ─── */
.type-h1,
.type-h2,
.type-h3 {
  font-family: var(--font-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

.type-h1 {
  font-size: var(--fs-h1);
}

.type-h2 {
  font-size: var(--fs-h2);
}

.type-h3 {
  font-size: var(--fs-h3);
}

/* ─── UI headings (h4-h6) — Oswald (lighter weight) ─── */
.type-h4,
.type-h5,
.type-h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

.type-h4 {
  font-size: var(--fs-h4);
}

.type-h5 {
  font-size: var(--fs-h5);
}

.type-h6 {
  font-size: var(--fs-h6);
}

/* ─── Body text — Barlow ─── */
.type-body,
.type-body-lg,
.type-body-sm,
.type-body-xs {
  font-family: var(--font-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  text-transform: none;
}

.type-body-lg {
  font-size: var(--fs-body-lg);
}

.type-body {
  font-size: var(--fs-body);
}

.type-body-sm {
  font-size: var(--fs-body-sm);
}

.type-body-xs {
  font-size: var(--fs-body-xs);
}

/* ─── Labels — uppercase metadata ─── */
.type-label,
.type-label-sm {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}

.type-label {
  font-size: var(--fs-label);
}

.type-label-sm {
  font-size: var(--fs-label-sm);
}

/* ─── Numeric emphasis — prices, stats (Oswald tight) ─── */
.type-numeric,
.type-numeric-lg {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}

.type-numeric {
  font-size: var(--fs-numeric);
}

.type-numeric-lg {
  font-size: var(--fs-numeric-lg);
  font-weight: var(--fw-semibold);
}