/* Base — resets and bare element defaults. Weakest layer; components override. */
@layer base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  * { margin: 0; }

  /* Background lives on html too (not just body) so the document canvas behind a
     view transition matches — otherwise the browser default (white) flashes
     through during the cross-fade in dark mode. */
  html { -webkit-text-size-adjust: 100%; background: var(--site-bg); }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    background: var(--site-bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-5); /* 500 — the app's standard text weight */
    line-height: 1.65;
    letter-spacing: 0.015em;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s var(--ease-3), color 0.2s var(--ease-3);
  }

  /* app shell: header / .canvas / footer stack in the body column.
     The .canvas content panel is defined in canvas.css. */

  h1, h2, h3, h4 { line-height: var(--font-lineheight-1); font-weight: var(--font-weight-8); }
  h1 { font-size: var(--font-size-6); letter-spacing: var(--font-letterspacing-1); }
  h2 { font-size: var(--font-size-4); }
  h3 { font-size: var(--font-size-3); }
  h4 { font-size: var(--font-size-2); }

  /* Mobile: step headings down one notch on the type scale. Body stays 1rem —
     inputs inherit it, and anything under 16px triggers iOS zoom-on-focus. */
  @media (max-width: 640px) {
    h1 { font-size: var(--font-size-5); }
    h2 { font-size: var(--font-size-3); }
    h3 { font-size: var(--font-size-2); }
    h4 { font-size: var(--font-size-1); }
  }

  /* bold text sits one notch above the UA's 700 to keep contrast with the
     500-weight body */
  b, strong { font-weight: var(--font-weight-8); }

  a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } /* AAA link; underlined since it's dark */

  img, svg, video { display: block; max-inline-size: 100%; height: auto; }

  :where(button, input, select, textarea) { font: inherit; color: inherit; }

  code, kbd, samp, pre { font-family: var(--font-mono, ui-monospace, monospace); }

  hr { border: none; border-block-start: var(--border-size-1) solid var(--line); }

  :focus-visible { outline: var(--border-size-2) solid var(--accent); outline-offset: 2px; }
}