/* Base typography and global element styling. */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: var(--line-height-heading);
  color: var(--color-heading);
}

h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

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

a { color: var(--color-primary); transition: color var(--transition-fast); }
a:hover, a:focus-visible { color: var(--color-secondary); }

:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.muted { color: var(--color-text-muted); }
.small { font-size: 0.875rem; }