*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-h2);
  line-height: var(--lh-display);
  margin: 0;
}

a { color: inherit; text-decoration: none; transition: var(--transition-color); }
a:hover { color: var(--text-primary); }
[data-ground="dark"] a:hover { color: var(--bo-green-500); }

/* Keyboard focus is visible everywhere. Hover states in this system are driven
   from JS, so this rule is the ONLY thing standing between a keyboard user and
   an invisible cursor — never override it away. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}
:focus:not(:focus-visible) { outline: none; }

img { display: block; }
button { font: inherit; }
[data-numeric], .bo-numeric { font-variant-numeric: tabular-nums; }

::selection { background: var(--bo-green-500); color: var(--bo-green-950); }

/* Reveals, marquees and hover lifts are decoration — drop them all when the
   reader has asked for less motion. Nothing in the system conveys meaning
   through movement, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}