body {
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  color: var(--color-text);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

h1 {
  margin-bottom: var(--space-5);
  font-size: var(--font-size-h1);
  letter-spacing: -0.035em;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-h2);
  letter-spacing: -0.02em;
}

h3 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-h3);
}

p {
  margin-bottom: var(--space-4);
}

.lead {
  color: var(--color-text-secondary);
  font-size: var(--font-size-lead);
  line-height: 1.55;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--color-primary);
  font-size: var(--font-size-small);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.display-text {
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 750;
  line-height: 1.05;
}

.heading-sample {
  font-size: var(--font-size-h2);
  font-weight: 700;
  line-height: var(--line-height-heading);
}

.text-small {
  font-size: var(--font-size-small);
}

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

code {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.85em;
}