/* ============================================================================
   base.css — reset + typography + accessibility (T3 Phase 1.2b, 2026-06-21)
   Extracted from base.html. Loaded after tokens.css.

   Keep this file SMALL. Only the foundations: box-sizing, body defaults,
   link colors, code font, heading scale, focus-visible. Component CSS lives
   in components.css; per-page CSS lives in pages.css.
   ============================================================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font: var(--text-md) / var(--leading-base) var(--font-body);
  -webkit-font-smoothing: antialiased;
  /* T3 Phase 5.x (2026-06-24): the chat uses flex to fill the viewport
     (chatwrap inside main inside body). body becomes a column flex
     container that pins to the dynamic viewport height so the chat
     never overflows vertically -- the old `height: calc(100dvh -
     90px)` magic constant in .chatwrap was 15px short of the real
     header+padding total, leaving a thin scrollbar below the
     composer on the empty chat. With this flex chain + min-height:0
     on the flex children, the chatwrap auto-sizes to the available
     height and the page never grows past the viewport. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
  background: var(--color-bg);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font: var(--text-sm) / var(--leading-tight) var(--font-mono);
}

/* Headings */
h1, h2, h3 { margin: 0 0 var(--space-3); font-weight: 600; }
h2 {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-fg-muted);
  margin-top: var(--space-6);
}
h2:first-child { margin-top: 0; }
h3 { font-size: var(--text-md); }

/* Focus: visible on every interactive element (a11y) */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}