/* ==========================================================================
 * base.css — element resets + body grid + global type helpers
 * ========================================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;padding:0;
  background:var(--bg);color:var(--ink);
  font-family:var(--ff-sans);
  font-size:16px;line-height:1.5;
  transition:background-color .25s, color .25s;
}
body{
  background:
    radial-gradient(circle at 1px 1px, var(--grid-dot) 1px, transparent 0) 0 0/22px 22px,
    var(--bg);
}
::selection{background:var(--accent);color:#fff}

.mono{font-family:var(--ff-mono)}
.pixel-font{font-family:var(--ff-pixel);letter-spacing:.5px}

/* visually hidden but available to screen readers (a11y-project recipe) */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  clip-path:inset(50%);
}