.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font: 600 12px/1.3 var(--font-sans);
  white-space: nowrap;
}

/* Rodada A: os tons vêm de --<tom>/--<tom>-soft, que já têm a versão escura em
   tokens.css — sem regra de tema aqui. */
.badge--success { background: var(--ok-soft); color: var(--ok); }
.badge--warning { background: var(--warn-soft); color: var(--warn); }
.badge--danger { background: var(--danger-soft); color: var(--danger); }
.badge--info { background: var(--accent-soft); color: var(--accent); }
.badge--neutral { background: var(--surface-2); color: var(--color-text-secondary); }

.badge--orange {
  background: var(--color-orange-50);
  color: var(--color-orange-700);
}

.badge--sm {
  padding: 2px 7px;
  font-size: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge--orange { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
}

[data-theme="dark"] .badge--orange { background: rgba(249, 115, 22, 0.15); color: #fb923c; }