/* static/css/components/badges.css */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-bd); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning); border: 1px solid var(--color-warning-bd); }
.badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger);  border: 1px solid var(--color-danger-bd); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info);    border: 1px solid var(--color-info-bd); }
.badge--neutral { background: var(--color-surface-2);  color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge--primary { background: var(--brand-light);      color: var(--brand-primary); border: 1px solid rgba(26,58,92,0.2); }