/* Base layer — element defaults, expressed only in tokens.
 *
 * Loaded after tokens.css and before any template's inline <style>, so a
 * template can still override anything here while it migrates.
 */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--fs-1);
  font-weight: var(--w-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* DM Sans carries an optical-size axis (9-40); `auto` is the default but is
   * stated here because it is a large part of why that family was chosen — it
   * is what lets ONE face set a 46px headline and 17px letter prose correctly.
   * It is also why the font links ask for a wght RANGE rather than a list of
   * weights: an enumerated request ships a fixed optical size. */
  font-optical-sizing: auto;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: var(--w-mid);
  margin: 0;
  letter-spacing: -0.01em;
}
/* 46px flat would overwhelm a 320px screen, so the top step is fluid: it
 * opens from --fs-4 to --fs-5 across the viewport and never rests between
 * steps. Below it the ladder is one step per level — 46 / 24 / 17 / 12. */
h1 { font-size: clamp(var(--fs-4), 6vw, var(--fs-5)); line-height: 1.14; }
h2 { font-size: var(--fs-3); line-height: 1.3; }
h3 { font-size: var(--fs-2); line-height: 1.35; }
h4 { font-size: var(--fs-1); line-height: 1.4; letter-spacing: 0.02em; }

p { margin: 0 0 var(--sp-3); }
a { color: inherit; }

/* The UA stylesheet sets b,strong{font-weight:bolder} — a RELATIVE keyword, so
 * it resolves against whatever the element inherits: 900 against a 600 or 700
 * parent. That is a fourth weight the scale doesn't have, and it only appears
 * where a bare <b> renders, which is often only under live data (it was invisible
 * on a dev server with an empty desk and showed up on production). Pinning it
 * here kills the whole class rather than one selector at a time. Template rules
 * still win — this sheet loads first — so .quackcard b's --w-mid and friends are
 * unaffected. */
b, strong { font-weight: var(--w-bold); }

/* The mono data layer: numbers, symbols and timestamps read as instrument
 * output, interface stays Inter, the paper's own voice is the serif. */
td, th, .tape .sym, .asof, .stamp, .kicker, .mono, .num, .kv {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* iOS Safari zooms the viewport when a form field has font-size < 16px on focus.
 * Enforcing 16px minimum on mobile viewports prevents unwanted auto-zoom. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: max(16px, var(--fs-2));
  }
}