/* Small status badges / pills */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
}

.badge--brand {
  color: var(--c-brand);
  border-color: color-mix(in srgb, var(--c-brand) 40%, transparent);
  background: color-mix(in srgb, var(--c-brand) 12%, transparent);
}

.badge--success {
  color: var(--c-success);
  border-color: color-mix(in srgb, var(--c-success) 40%, transparent);
}

.badge--warning {
  color: var(--c-warning);
  border-color: color-mix(in srgb, var(--c-warning) 40%, transparent);
}

.badge--danger {
  color: var(--c-danger);
  border-color: color-mix(in srgb, var(--c-danger) 40%, transparent);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}