/* Badges */


.app-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
}

.app-badge--success {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.app-badge--warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.app-badge--muted {
  background: var(--color-bg);
  color: var(--color-text-muted);
}

.app-badge--inbound {
  background: #e8f0fe;
  color: #1a4a8a;
}

.app-badge--outbound {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

.app-badge--brand {
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, var(--color-surface));
}

.app-badge--danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}