/* Base styles for every bd page. Values come from the brand's tokens.css; add new tokens there, not numbers here. */
/* Spacing scale. Brands have no spacing tokens yet, so it lives here. px, so /bd:tweak gives each a slider. */
:root { --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --measure: 68ch; --page-max: 1200px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-surface); color: var(--c-text); font-family: var(--font-body);
  font-size: var(--fs-base); line-height: 1.6; }
h1, h2, h3, h4 { margin: 0; color: var(--c-ink); font-family: var(--font-heading); line-height: 1.15;
  text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.skip-link { position: absolute; left: var(--sp-4); top: -100%; padding: var(--sp-3) var(--sp-4); background: var(--c-ink);
  color: var(--c-surface); z-index: 10; }
.skip-link:focus { top: var(--sp-4); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Display sizes for the landing page mock-ups. Not in the brand scale yet. */
:root { --fs-6xl: 96px; --fs-7xl: 168px; }
/* Light surfaces for the light mock-ups. Both values come from the brand file: the blue-tinted white used on
   buttons, and the grey-blue from the canvas list. */
:root { --c-paper: #F4F8FC; --c-muted-on-light: #4A5B78; --tap-min: 44px; }