/* ----------------------------------------------------------------------- */
/* Badges + status pills                                                    */
/* ----------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink-soft);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  /* Center against neighboring inline text — without this, the badge
     sits on the text baseline, which puts it visually low next to
     a tall heading like `<h1>Acme <span class="badge">Zendesk</span></h1>`. */
  vertical-align: middle;
}
.badge--ink   { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.badge--ok    { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.badge--warn  { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.badge--err   { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.badge--soft  { background: var(--bg); color: var(--ink-muted); border-color: var(--rule); }
.badge--accent{ background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }