/* ───────────── TOKENS ───────────── */
:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --ink: #0E0E10;
  --ink-2: #3A3A40;
  --ink-3: #6B6B73;
  --ink-4: #9A9AA2;
  --ink-5: #C8C8CE;
  --line: #ECECEA;
  --line-2: #F4F4F2;
  --hover: #F5F5F3;
  --accent: #4F46E5;
  --accent-soft: #EEF0FF;
  --accent-ink: #312E81;
  --ok: #0F8A5F;
  --warn: #B8740A;
  --err: #C8321F;
  --info: #2563BB;
  --shadow-sm: 0 1px 2px rgba(15,15,20,.04);
  --shadow: 0 4px 14px rgba(15,15,20,.05), 0 1px 2px rgba(15,15,20,.04);
  --radius: 10px;
  --radius-sm: 7px;
  --radius-lg: 14px;
}

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

/* ───────────── TYPOGRAPHY ───────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ───────────── ANIMATIONS ───────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ───────────── UTILITIES ───────────── */
.hidden { display: none !important; }