/* ── Typography ─────────────────────────────────────────── */

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Heading scales ── */

.h1 {
  font-size: clamp(var(--text-4xl), 8vw, var(--text-6xl));
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.h2 {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.h3 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

/* ── Section label (small uppercase text above h2) ── */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.section-label::before,
.section-label::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--color-border-hover);
}

/* ── Body text ── */
.text-secondary {
  color: var(--color-text-secondary);
}

.text-muted {
  color: var(--color-text-muted);
}

.text-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ── Logo text ── */
.logo-text {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
}

/* ── Number accent (01, 02, 03) ── */
.step-number {
  font-size: clamp(4rem, 10vw, 7rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-border);
  line-height: 1;
  user-select: none;
}