/* ══════════════════════════════════════════════════════════════
   Badges — static/css/components/badges.css
   Pill-shaped status badges with optional icon support.
   Prefix: uc-badge to avoid Bootstrap collision.
   Uses design tokens from root.css.
   ══════════════════════════════════════════════════════════════ */

.uc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.uc-badge .bi {
  font-size: 12px;
}

/* ── Variants ─────────────────────────────────────────────── */
.uc-badge-primary {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.uc-badge-accent {
  background: var(--accent-light);
  color: var(--accent-dark);
}

.uc-badge-error {
  background: var(--error-light);
  color: var(--error);
}

.uc-badge-success {
  background: var(--success-light);
  color: var(--success);
}

.uc-badge-info {
  background: var(--info-light);
  color: var(--info-text);
}

.uc-badge-warning {
  background: var(--warning-light);
  color: var(--warning-text);
}

.uc-badge-neutral {
  background: var(--neutral-200);
  color: var(--neutral-700);
}