/* =========================================================
   NexaAI — Typography
   Display: Outfit (geometric, technical, slightly warm)
   Body:    Inter (neutral workhorse for dense UI + data)
   Mono:    JetBrains Mono (code blocks, data tags, credits)
   ========================================================= */

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--text);
}

h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); font-weight: 600; }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.05rem; }
h6 { font-size: 0.9rem; }

p {
  margin: 0 0 1em;
  max-width: 68ch;
}

.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 52ch;
}

.text-muted { color: var(--text-muted) !important; }
.text-faint { color: var(--text-faint) !important; }
.text-mono { font-family: var(--font-mono); }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--primary-soft-ink);
  background: var(--primary-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-weight: 500;
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  overflow-x: auto;
}