/* Badge: todo status com tom; neutro por padrão. */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-support);
  line-height: 1.4;
  white-space: nowrap;
}

:where(.badge) {
  background: var(--surface);
  color: var(--text);
}

.badge-success {
  background: var(--success-bg);
  color: var(--success);
}

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

.badge-error {
  background: var(--error-bg);
  color: var(--error);
}

@media (forced-colors: active) {
  .badge {
    border: 1px solid CanvasText;
  }
}