.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-badge--info { background: var(--color-info-50); color: var(--color-info-700); }
.status-badge--info::before { background: var(--color-info-500); }
.status-badge--teal { background: var(--accent-teal-50); color: var(--accent-teal-600); }
.status-badge--teal::before { background: var(--accent-teal-500); }
.status-badge--brand { background: var(--brand-navy-50); color: var(--brand-navy-700); }
.status-badge--brand::before { background: var(--brand-navy-700); }
.status-badge--success { background: var(--color-success-50); color: var(--color-success-700); }
.status-badge--success::before { background: var(--color-success-500); }
.status-badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.status-badge--warning::before { background: var(--color-warning-500); }
.status-badge--danger { background: var(--color-danger-50); color: var(--color-danger-700); }
.status-badge--danger::before { background: var(--color-danger-500); }
.status-badge--gray { background: var(--gray-100); color: var(--gray-700); }
.status-badge--gray::before { background: var(--gray-500); }