/* ============================================================
   BASE — Global element styles
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--bg-base);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
  background-size: 48px 48px;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
}

p {
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

code, pre {
  font-family: var(--font-mono);
}

/* ── Focus ring ── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── Selection ── */
::selection {
  background: rgba(245, 158, 11, 0.25);
  color: var(--text-primary);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar        { width: 6px; }
::-webkit-scrollbar-track  { background: var(--bg-surface); }
::-webkit-scrollbar-thumb  { background: var(--border-hover); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }