@import "./reset.css";
/* ZOOSH ME! tokens — the ONLY token set. Generated from tokens/pkl/foundation/*.pkl by
   `pnpm build:tokens:foundation`; retune the brand there, never here. The hand-maintained M3-era
   variables.css that used to load above this is gone — every app CSS module now speaks the
   foundation's role vocabulary (--color-accent, --color-surface-*, --color-text*), and the legacy
   names the SHARED rescript-design-system package still reads are supplied as aliases by
   tokens/pkl/foundation/ds-compat.pkl, which carries its own kill-list. */
@import "./variables.foundation.css";
@import "./breakpoints.css";
@import "./typography.css";

* {
  box-sizing: border-box;
}

:root {
  /* A layout constant, not a design token — do not add it to the PKL. The site header is 88px in
     the design and the space scale has no 88, so it is composed from the 56px action chip
     (--space-350) plus one step above and below (--space-200). Declared once here because two
     places need it: SiteHeader.module.css sets the header's height from it, and the
     scroll-padding below keeps an anchored section from landing underneath it. */
  --site-header-height: calc(var(--space-350) + var(--space-200));
}

html {
  scroll-behavior: smooth;
  /* Section anchors (see SiteSections.res) sit under a sticky header — without this a jump to
     #heroes parks the heading behind it. */
  scroll-padding-top: calc(var(--site-header-height) + var(--space-100));
}

/* The mobile header is two rows (lockup + hamburger, then the full-width switcher), so it is
   taller than the desktop bar and the anchor offset has to follow it. */
@media (max-width: 768px) {
  html {
    scroll-padding-top: calc(var(--site-header-height) + var(--space-350));
  }
}

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

body {
  background-color: var(--body-background);
  color: var(--body-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}