/* ============================================================
   base.css — reset + foundational element styles.
   Load order: tokens.css → theme.css (admin overrides) → base.css → components.css
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
::selection { background: var(--jade); color: var(--emerald-deep); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.wrap-app { max-width: var(--maxw-app); margin: 0 auto; padding: 0 28px; }
.prose { max-width: var(--maxw-prose); }
.tabnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }

.kicker {
  font-size: var(--fs-kicker); font-weight: 700; letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--teal);
}
.kicker .pulse {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--crimson); margin-right: 7px; vertical-align: middle;
}

@media (max-width: 540px) { .wrap, .wrap-app { padding: 0 20px; } }