/* Kokoro page base. Load after tokens.css and kokoro.css on every site page.
   Sets the page ground, text defaults and focus ring, so page CSS only does layout. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Reading text is medium (500) in full ink. Zen Kaku Gothic New's regular weight and small lowercase
   letters made 18px text read like 15px next to sites such as healthy.kaiserpermanente.org. */
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-body); font-weight: 500; line-height: 1.6; }
h1, h2, h3, p { margin: 0; }
/* Headings break into lines of even length; paragraphs avoid a single word on the last line. */
h1, h2, h3 { text-wrap: balance; }
p, dd, li { text-wrap: pretty; }
/* Selected text uses the palette, not the browser's blue. */
::selection { background: var(--accent); color: var(--on-brand); }
a { color: var(--brand); }
a:hover { color: var(--ink); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }

/* The eyebrow is always accent (brand book, Typography). Item-title size and bold, so it reads as a label above the heading, not as fine print under the body text. */
.eyebrow { color: var(--accent); font-size: var(--text-eyebrow); line-height: 1.4; font-weight: 700; }

/* A visitor who chose another language: the page stays hidden until js/i18n.js has swapped the
   strings (the head snippet in each page sets the attribute; the script clears it, or after 1.5s). */
html[data-i18n-pending] body { visibility: hidden; }

/* Anchor links glide to their section, unless the visitor asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}