/* base: the layer order every page has, and the page's own type and spacing. Colours come from theme.css. */
@layer reset, base, grammar, theme, state;
@layer base {
  html { font-family: var(--font-body, system-ui, sans-serif); color: var(--color-fg); background: var(--color-bg); line-height: 1.5; }
  h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; }
  h1 { font-size: calc(1rem * var(--type-scale) * var(--type-scale) * var(--type-scale)); }
  h2 { font-size: calc(1rem * var(--type-scale) * var(--type-scale)); }
  h3 { font-size: calc(1rem * var(--type-scale)); }
  a { color: var(--color-accent); }
  :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
}