/* 04-base.css - Base element styling */
html { font-size: 100%; }
body {
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background-color: var(--color-cream);
  overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.15;
  color: var(--color-forest-dark);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 5vw, var(--fs-5xl)); }
h2 { font-size: clamp(2rem, 4vw, var(--fs-3xl)); }
h3 { font-size: clamp(1.375rem, 2.5vw, var(--fs-xl)); }
p { font-size: var(--fs-base); color: var(--color-text-muted); line-height: 1.7; }
strong { font-weight: 600; color: var(--color-forest-dark); }
a { transition: color var(--transition-fast); }
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--color-gold-light); color: var(--color-forest-dark); }
svg { fill: currentColor; }
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  background: var(--color-forest);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 9999;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-sm); }