/* ─────────────────────────────────────────────────────────────
   Base reset, typography, focus, density, selection, scroll.
   Extends tokens.css (which already resets box-sizing + body).
   ───────────────────────────────────────────────────────────── */

html { height: 100%; }
body { height: 100%; overflow: hidden; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection {
  background: var(--accent-bg-strong);
  color: var(--text-primary);
}

/* ── Scrollbar styling (Webkit) ───────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-quaternary); }

/* Firefox scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ── Typography presets ───────────────────────────────────── */
.font-display { font-family: var(--font-display); }
.font-mono    { font-family: var(--font-mono); }

.text-primary    { color: var(--text-primary); }
.text-secondary  { color: var(--text-secondary); }
.text-tertiary   { color: var(--text-tertiary); }
.text-quaternary { color: var(--text-quaternary); }

/* ── Density-aware spacing ────────────────────────────────── */
.pad-1  { padding: calc(var(--space-1)  * var(--density)); }
.pad-2  { padding: calc(var(--space-2)  * var(--density)); }
.pad-3  { padding: calc(var(--space-3)  * var(--density)); }
.pad-4  { padding: calc(var(--space-4)  * var(--density)); }
.pad-6  { padding: calc(var(--space-6)  * var(--density)); }
.gap-1  { gap: calc(var(--space-1)  * var(--density)); }
.gap-2  { gap: calc(var(--space-2)  * var(--density)); }
.gap-3  { gap: calc(var(--space-3)  * var(--density)); }
.gap-4  { gap: calc(var(--space-4)  * var(--density)); }
.gap-6  { gap: calc(var(--space-6)  * var(--density)); }

/* ── Flex + grid utilities ────────────────────────────────── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; min-width: 0; }
.shrink-0 { flex-shrink: 0; }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ── Misc ─────────────────────────────────────────────────── */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.tabular { font-variant-numeric: tabular-nums; }
.uppercase { text-transform: uppercase; }
.pointer { cursor: pointer; }
.relative { position: relative; }
.w-full { width: 100%; }