/* ============================================================
   BASE — resets, links, selection, scrollbar
   Loaded last so it can rely on tokens above.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* prevent chalk/dark body bg from bleeding right edge */
  background-color: var(--color-dark-bg); /* scrollbar track matches dark sections */
}

img, video, svg { max-width: 100%; display: block; }

a {
  color: var(--text-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-quart);
}
a:hover { color: var(--color-lb-glow); }

p  { margin-block: var(--space-4); text-wrap: pretty; }
ul, ol { padding-left: var(--space-6); }

/* ── SELECTION ── */
::selection {
  background: var(--color-lb-ice);
  color: var(--color-lb-deep);
}
@media (prefers-color-scheme: dark) {
  ::selection { background: rgba(27, 31, 232, 0.4); color: #fff; }
}
[data-theme="dark"] ::selection {
  background: rgba(27, 31, 232, 0.4);
  color: #fff;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-stone); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-ash); }
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background: var(--color-dark-muted); }
}
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-dark-muted); }