/* base.css -- reset, body, type scale, focus ring. Loaded on every page after tokens.css.
   No raw values here: everything comes from tokens.css. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body)/1.5 var(--font);
  font-variant-numeric: tabular-nums;     /* columns of money line up to the digit */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--t-title); line-height: 1.2; font-weight: 600; }
h2 { font-size: var(--t-head); line-height: 1.3; font-weight: 600; }
/* Focus is a 2px accent ring, offset 2px, never removed (DESIGN.md section 8). */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The page column: capped reading width, 24px gutter, 16px below 600px (section 2). */
.page { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
@media (max-width: 600px) { .page { padding: 32px 16px; } }
/* Uppercase micro label over a value (section 3). */
.label { font-size: var(--t-micro); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
/* Secondary text. */
.soft { color: var(--ink-soft); }