/* ─── Reset & base ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  max-width: 36rem;
  margin: 0 auto;
  padding: var(--sp-9) var(--sp-6) calc(var(--sp-9) * 3);
}

a { color: var(--text-warm); text-decoration: underline; text-underline-offset: 2px; }
p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* ─── Page headings ───────────────────────────────────────────── */
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-6);
}

h2 {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-1);
}

/* ─── Flash messages ──────────────────────────────────────────── */
.notice, .alert {
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
}

.notice { background: var(--tint-amber); color: var(--amber-dark); }
.alert  { background: #fee2e2; color: #991b1b; }

/* ─── Utility ─────────────────────────────────────────────────── */
.hidden { display: none !important; }