[data-fui-comp="ui-badge"] {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-md, 8px);
  border-radius: var(--radii-full, 9999px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}
[data-fui-comp="ui-badge"].ui-badge--success {
  background: color-mix(in oklab, var(--color-success, #16A34A) 15%, var(--color-surface, #fff) 85%);
  color: var(--color-success, #16A34A);
  border-color: color-mix(in oklab, var(--color-success, #16A34A) 30%, var(--color-surface, #fff) 70%);
}
[data-fui-comp="ui-badge"].ui-badge--warning {
  background: color-mix(in oklab, var(--color-warning, #CA8A04) 15%, var(--color-surface, #fff) 85%);
  color: var(--color-warning, #CA8A04);
  border-color: color-mix(in oklab, var(--color-warning, #CA8A04) 30%, var(--color-surface, #fff) 70%);
}
[data-fui-comp="ui-badge"].ui-badge--danger {
  background: color-mix(in oklab, var(--color-danger, #DC2626) 15%, var(--color-surface, #fff) 85%);
  color: var(--color-danger, #DC2626);
  border-color: color-mix(in oklab, var(--color-danger, #DC2626) 30%, var(--color-surface, #fff) 70%);
}
[data-fui-comp="ui-badge"].ui-badge--info {
  background: color-mix(in oklab, var(--color-info, #2563EB) 15%, var(--color-surface, #fff) 85%);
  color: var(--color-info, #2563EB);
  border-color: color-mix(in oklab, var(--color-info, #2563EB) 30%, var(--color-surface, #fff) 70%);
}
[data-fui-comp="ui-badge"].ui-badge--neutral {
  background: var(--color-surface-soft, #F4F4F5);
  color: var(--color-text-muted, #52525B);
  border-color: var(--color-border, #E4E4E7);
}