/* ========== Base ========== */
/*
 * Element defaults from ExaLife (index.css @layer base). Opt-in: on an existing site this
 * restyles every page, so add it only for new projects or once pages use the type scale.
 */

html {
  font-family: var(--exa-font-body);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* offset for a sticky header when jumping to #anchors */
}

body {
  background-color: var(--exa-color-bg);
  color: var(--exa-color-text-primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--exa-font-heading);
}

h4 {
  color: var(--exa-color-text-primary);
  font-size: var(--exa-text-title-size);
  font-weight: var(--exa-font-weight-bold);
  line-height: var(--exa-text-title-line-height);
  letter-spacing: var(--exa-text-title-tracking);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--exa-2) transparent;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}