/* ============================================================
   base.css — reset + bare-element styling off tokens.css.
   Load order on every page: tokens.css → base.css → page css.
   Bare <button>/<input>/<textarea>/<select> look right by
   default, so pages add little of their own CSS.
   ============================================================ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Headings & text ───────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); }

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

small { font-size: var(--fs-sm); color: var(--text-muted); }

::selection { background: var(--accent-dim); color: var(--text); }

/* ── Form elements (bare tags, pre-styled) ─────────────────── */
input, textarea, select, button {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text);
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="date"],
textarea, select {
  width: 100%;
  background: var(--surface-inset);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
textarea { resize: vertical; line-height: var(--lh-base); }

/* Default button: quiet outline. Primary actions use .btn-primary (Step 2+). */
button {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  background: var(--surface);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
button:hover { background: var(--surface-raised); border-color: var(--border-strong); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Solid accent button — the primary action. */
.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* ── Focus visibility (accessibility floor) ────────────────── */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

/* ── Status dot (signature language, used everywhere) ──────── */
.dot { width: 7px; height: 7px; border-radius: var(--r-pill); display: inline-block; flex: none; }
.dot.ok   { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.down { background: var(--accent); }

/* ── Scrollbars (techy, unobtrusive) ───────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); border: 2px solid var(--bg); }
*::-webkit-scrollbar-track { background: transparent; }

/* ── Motion preference ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}