/* Better by Mom starter site: the only page-level rules. Load after tokens.css and components.css.
   Every value is a token; the components carry their own styles. */
html {
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-block-start: var(--header-height);
}
body {
  margin: 0;
  color: var(--deep-green);
  font: var(--text-body-mobile);
}
@media (width >= 700px) { /* breakpoint-tablet */
  body { font: var(--text-body); }
}
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}