/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
ul, ol { list-style: none; }
h1,h2,h3,h4,h5,h6 { font-weight: var(--weight-semibold); line-height: var(--leading-tight); }

/* ─── Utilities ─── */
.hidden { display: none !important; }
.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;
}
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.text-secondary { color: var(--color-text-secondary); }
.text-sm  { font-size: var(--text-sm); }
.text-xs  { font-size: var(--text-xs); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

/* ─── Layout primitives ─── */
.stack   { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; }

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

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

/* ─── Page fade-in ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp var(--duration-slow) var(--ease-out) both;
}
.fade-up-1 { animation-delay: 60ms; }
.fade-up-2 { animation-delay: 120ms; }
.fade-up-3 { animation-delay: 180ms; }
.fade-up-4 { animation-delay: 240ms; }

/* ─── Divider ─── */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
}