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

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  min-height: 100dvh;
}

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
}

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

p { color: var(--text-muted); line-height: 1.7; }

strong { font-weight: 600; color: var(--text); }

code, pre {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

code { padding: 2px 6px; }

pre {
  padding: var(--space-4);
  overflow-x: auto;
  border: 1px solid var(--border);
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

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

/* ── Selection ── */
::selection { background: var(--primary-glow); color: var(--text); }

/* ── Utility classes ── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.flex   { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { width: 100%; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }