/*
 * components/badges.css — Status/health badge component (Session 4).
 *
 * Non-color-only status (plan §7.3/§31): every badge pairs its color with
 * text and a small leading dot, never color alone. Paired with the
 * `badge()`/`status_badge()` macros in templates/components/badges.html.
 * Namespaced `.badge` (distinct from the legacy `.portal-badge*`).
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  background: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
  white-space: nowrap;
  line-height: var(--lh-base);
}

.badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}

.badge--success {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
}

.badge--danger {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
}

.badge--warning {
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
}

.badge--info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
}

.badge--info::before {
  animation: badge-pulse 1.2s var(--ease-standard) infinite;
}

.badge--neutral {
  background: var(--color-neutral-bg);
  color: var(--color-neutral-fg);
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .badge--info::before {
    animation: none;
  }
}