.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1);
  padding: var(--size-1) var(--size-3);
  font-size: var(--font-sm);
  font-weight: 600;
  line-height: var(--size-5);
  border-radius: 9999px;
  background: var(--accent);
  color: var(--fg-on-accent);
}

.badge-secondary {
  background: var(--bg-2);
  color: var(--fg-0);
}

.badge-outline {
  background: transparent;
  color: var(--fg-0);
  border: var(--border-0);
}

.badge-success {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 12%, var(--bg-0));
}

.badge-warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, var(--bg-0));
}

.badge-danger {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg-0));
}