body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
}

.font-display {
  font-family: var(--font-display);
}

.font-mono {
  font-family: var(--font-mono);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-600);
}

[data-theme="dark"] .eyebrow {
  color: var(--color-primary-400);
}

.heading-xl {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.04em;
  color: var(--color-text);
}

.heading-lg {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.035em;
  color: var(--color-text);
}

.heading-md {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.heading-sm {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 650;
  line-height: var(--leading-snug);
  letter-spacing: -0.025em;
  color: var(--color-text);
}

.heading-xs {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: var(--leading-snug);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  color: var(--color-text);
}

.title a {
  color: inherit;
  text-decoration: none;
}

.title a:hover {
  color: var(--color-primary-600);
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 42rem;
}

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

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

.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-center {
  text-align: center;
}

.text-balance {
  text-wrap: balance;
}

.mx-auto {
  margin-inline: auto;
}

.section-header {
  max-width: 40rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.section-header.centered {
  margin-inline: auto;
  text-align: center;
}

.section-header .lead {
  margin-top: 1rem;
}

.section-header.centered .lead {
  margin-inline: auto;
}