/* ============================================================
   base.css — Reset, Typography, Scrollbar, Animations
   ============================================================ */

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      var(--fw-regular);
  line-height:      1.5;
  color:            var(--text);
  background:       var(--bg);
  min-height:       100vh;
  overflow-x:       hidden;
  transition:       background var(--t-normal), color var(--t-normal);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); }
* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }

/* ── Typography ───────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: var(--fw-semi); line-height: 1.2; color: var(--text); }
/* Ensure consistent btn height via design token */
.btn { height: var(--h-btn); padding: 0 var(--px-btn); }
.btn-sm { height: var(--h-btn-sm); padding: 0 var(--px-btn-sm); }
.btn-lg { height: var(--h-btn-lg); padding: 0 var(--px-btn-lg); }
.input, select.input, textarea.input { min-height: var(--h-input); }
textarea.input { height: auto; }

.mono { font-family: var(--font-mono); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-muted  { color: var(--text2); }
.text-subtle { color: var(--text3); }
.text-accent { color: var(--accent); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-orange { color: var(--orange); }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; letter-spacing: 0.08em; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

code {
  font-family: var(--font-mono);
  font-size:   0.875em;
  color:        var(--accent);
  background:   rgba(var(--accent-rgb),.1);
  padding:      1px 5px;
  border-radius: var(--radius-sm);
}

/* ── Links ────────────────────────────────────────────────── */
a { color: var(--accent); text-decoration: none; transition: opacity var(--t-fast); }
a:hover { opacity: .8; }

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

/* ── Animations ───────────────────────────────────────────── */
@keyframes pulse     { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes slideUp   { from{transform:translateY(16px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }

.anim-fadeIn  { animation: fadeIn  var(--t-normal) both; }
.anim-slideUp { animation: slideUp var(--t-normal) both; }

/* Staggered children */
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.12s; }
.stagger > *:nth-child(4) { animation-delay: 0.16s; }
.stagger > *:nth-child(5) { animation-delay: 0.20s; }