/* ============================================================
   base.css — reset, typography, body, shared utilities
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* subtle brutalist dotted grid, flat (not a gradient fill) */
  background-image: radial-gradient(var(--ink) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -13px -13px;
}
/* the dotted grid uses radial-gradient purely as a 1px dot texture,
   not as a color ramp — the design has zero color gradients. */

button { cursor: pointer; border: none; font-family: var(--font-body); background: none; color: inherit; }
img { display: block; max-width: 100%; }
input, select, textarea { font-family: var(--font-body); }

h1, h2, h3, .display { font-family: var(--font-display); }

/* Icon sizing defaults */
.icon { display: inline-block; width: 1.4em; height: 1.4em; vertical-align: middle; flex-shrink: 0; }
.icon-lg { width: 40px; height: 40px; }
.icon-xl { width: 64px; height: 64px; }

/* Screens */
.screen { display: none; min-height: 100dvh; width: 100%; position: relative; }
.screen.active { display: flex; flex-direction: column; }

/* Utilities */
.pb-nav { padding-bottom: calc(var(--bottom-nav-height) + var(--space-4) + env(safe-area-inset-bottom)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Shared neo-brutal surfaces */
.nb-card {
  background: var(--color-surface);
  border: var(--bd);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Focus visibility for accessibility */
:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}