body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  color: var(--color-primary);
}

h1 { font-size: var(--fs-3xl); margin-bottom: var(--space-3); }
h2 { font-size: var(--fs-2xl); margin-bottom: var(--space-2); }
h3 { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
h4 { font-size: var(--fs-lg); margin-bottom: var(--space-1); }

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

a { color: var(--color-primary); transition: color var(--transition); }
a:hover { color: var(--color-accent-dark); }

strong { font-weight: 700; }
em { font-style: italic; }

.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent-dark); }
.text-center { text-align: center; }

.lead { font-size: var(--fs-lg); color: var(--color-muted); }

@media (max-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}