/* ============================================================
   SUPREME CONTROLS — TYPOGRAPHY
   Heading scale, body text, labels, special text styles.
   Font: Wix Madefor Display (headings) / Wix Madefor Text (body)
   ============================================================ */

/* ── Headings ────────────────────────────────────────────── */
.h1 {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-zinc-900);
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  color: var(--color-zinc-900);
}

.h3 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--color-zinc-900);
}

.h4 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--color-zinc-900);
}

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

.h6 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-zinc-900);
}

/* ── Hero headings (larger than page h1) ─────────────────── */
.display-xl {
  font-family: var(--font-display);
  font-size: var(--text-8xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-zinc-900);
}

.display-lg {
  font-family: var(--font-display);
  font-size: var(--text-7xl);
  font-weight: var(--font-weight-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-zinc-900);
}

/* White variants for dark backgrounds */
.display-xl--white,
.display-lg--white,
.h1--white,
.h2--white,
.h3--white {
  color: var(--color-white);
}

/* ── Body text ───────────────────────────────────────────── */
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-loose);
  color: var(--color-zinc-600);
}

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

.body-sm {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-zinc-500);
}

/* ── Labels ──────────────────────────────────────────────── */
.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-zinc-500);
}

.label--brand {
  color: var(--color-brand);
}

/* ── Links ───────────────────────────────────────────────── */
.link {
  color: var(--color-brand);
  font-weight: var(--font-weight-medium);
  transition: color var(--transition-fast);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
}

.link:hover {
  text-decoration-color: var(--color-brand);
}

/* ── Stat number ─────────────────────────────────────────── */
.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-zinc-900);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-zinc-500);
  margin-top: var(--space-2);
}

/* ── Responsive type scale ───────────────────────────────── */
@media (max-width: 1024px) {
  .display-xl  { font-size: var(--text-7xl); }
  .display-lg  { font-size: var(--text-6xl); }
  .h1          { font-size: var(--text-6xl); }
  .h2          { font-size: var(--text-4xl); }
  .h3          { font-size: var(--text-3xl); }
  .stat-number { font-size: var(--text-4xl); }
}

@media (max-width: 768px) {
  .display-xl  { font-size: var(--text-5xl); }
  .display-lg  { font-size: var(--text-5xl); }
  .h1          { font-size: var(--text-4xl); }
  .h2          { font-size: var(--text-3xl); }
  .h3          { font-size: var(--text-2xl); }
  .h4          { font-size: var(--text-xl); }
  .body-lg     { font-size: var(--text-lg); }
  .stat-number { font-size: var(--text-3xl); }
}

@media (max-width: 480px) {
  .display-xl  { font-size: var(--text-4xl); }
  .display-lg  { font-size: var(--text-4xl); }
  .h1          { font-size: var(--text-3xl); }
  .h2          { font-size: var(--text-2xl); }
}