/* ─── Typography ─── */

h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-5xl), 6vw, var(--text-9xl));
  line-height: var(--leading-tight);
  font-weight: var(--weight-normal);
  font-variation-settings: 'SOFT' 60;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-7xl));
  line-height: var(--leading-tight);
  font-weight: var(--weight-normal);
  font-variation-settings: 'SOFT' 40;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

h3, .h3 {
  font-family: var(--font-body);
  font-size: clamp(var(--text-xl), 2vw, var(--text-3xl));
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 4vw, var(--text-7xl));
  line-height: var(--leading-tight);
  font-variation-settings: 'SOFT' 40;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: clamp(var(--text-base), 1.2vw, var(--text-lg));
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 540px;
}

.body-large {
  font-size: clamp(var(--text-lg), 1.5vw, var(--text-xl));
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

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

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

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

.caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
}

strong, .strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.15em 0.3em;
  background: var(--color-code-bg);
  border-radius: var(--radius-sm);
}

.terminal-text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

.terminal-text .prompt {
  color: var(--color-accent-secondary);
}

.terminal-text .cmd {
  color: var(--color-text-primary);
}

.terminal-text .output {
  color: var(--color-text-tertiary);
}