/* Consolidated Badge Component System */

/* Base badge component */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-full);
  font-weight: var(--font-medium);
  white-space: nowrap;
}

/* Size variants */
.badge--sm {
  font-size: 10px;
  padding: 2px var(--spacing-xs);
}

.badge--lg {
  font-size: var(--text-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

/* Semantic color variants */
.badge--primary {
  background: var(--color-primary-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
}

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

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

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

.badge--neutral {
  background: var(--color-surface-elevated);
  color: var(--color-text-subtle);
  border: 1px solid var(--color-border);
}

/* Status color variants for mode badges */
.badge--green {
  background: var(--color-green-100);
  color: var(--color-green-800);
}

.badge--blue {
  background: var(--color-blue-100);
  color: var(--color-blue-800);
}

.badge--purple {
  background: var(--color-purple-100);
  color: var(--color-purple-800);
}

.badge--gray {
  background: var(--color-gray-100);
  color: var(--color-gray-600);
}

/* Special style variants */
.badge--count {
  border: 1px solid var(--color-border);
  padding: var(--spacing-xs) var(--spacing-md);
}

.badge--uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
  font-weight: 600;
}

/* Badge icon sizing */
.badge svg,
.badge img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}