/* Design tokens: colors and font. Source of truth for surfaceworks.nl, /interesse/ and /manual/.
   Link this file directly (<link rel="stylesheet" href="/shared/tokens.css">) rather than
   copying the values — it's served once, from the same domain as every property. */
:root {
  --ink: #111; --muted: #6b6b6b; --bg: #fafafa; --card: #fff; --line: #d9d9d9;
  /* The shared grid: every full-width bar (header, footer) and every page's <main> uses this
     same max-width + side padding, so their left/right edges line up down the page. Don't pick
     a one-off number per page — that's what caused the misalignment this fixed. */
  --container: 46rem; --gutter: 20px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f2; --muted: #9a9a9a; --bg: #0d0d0d; --card: #171717; --line: #333;
  }
}
* { box-sizing: border-box; }
/* Reserve the scrollbar's width on every page, whether that page actually needs to scroll or
   not. Without this, a short page (no scrollbar) and a tall page (scrollbar takes ~15px) center
   their max-width content — header, hero, footer, all of it — around a slightly different width,
   which shows up as everything visibly jumping left by half the scrollbar's width the instant you
   land on the taller page (e.g. / -> /interesse/, caught via measurement: the header logo landed
   7.5px apart between the two). scrollbar-gutter is the direct fix; overflow-y:scroll is the
   classic fallback for the rare browser without scrollbar-gutter support. */
html { scrollbar-gutter: stable; overflow-y: scroll; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}
a { color: inherit; }