/*
 * Badge
 * Colors: neutral, success, warning, error, info
 * Variants: solid, dot
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem 0.625rem;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Neutral */
.badge-neutral {
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Success */
.badge-success {
  background: #dcfce7;
  color: #166534;
}
.dark .badge-success {
  background: #14532d;
  color: #86efac;
}

/* Warning */
.badge-warning {
  background: #fef3c7;
  color: #92400e;
}
.dark .badge-warning {
  background: #78350f;
  color: #fde68a;
}

/* Error */
.badge-error {
  background: #fee2e2;
  color: #991b1b;
}
.dark .badge-error {
  background: #7f1d1d;
  color: #fca5a5;
}

/* Info */
.badge-info {
  background: #dbeafe;
  color: #1e40af;
}
.dark .badge-info {
  background: #1e3a5f;
  color: #93c5fd;
}

/* Dot variant */
.badge-dot::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}