/**
 * DS-11: Badge Component
 * 
 * Reusable badge component following DS tokens
 */

.bb-component-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs, 4px);
  padding: var(--space-xxs, 4px) var(--space-sm, 12px);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--type-micro-size, 0.8125rem);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

/* Variants */
.bb-component-badge--primary {
  background: var(--accent-soft, rgba(196, 126, 66, 0.18));
  color: var(--accent, var(--aperium-copper));
  border: 1px solid var(--accent, var(--aperium-copper));
}

.bb-component-badge--success {
  background: var(--success-bg, rgba(16, 185, 129, 0.12));
  color: var(--success-text, #6ee7b7);
  border: 1px solid var(--success-border, rgba(16, 185, 129, 0.3));
}

.bb-component-badge--error {
  background: var(--error-bg, rgba(220, 38, 38, 0.12));
  color: var(--error-text, #fca5a5);
  border: 1px solid var(--error-border, rgba(220, 38, 38, 0.3));
}

.bb-component-badge--warning {
  background: var(--warning-bg, rgba(245, 158, 11, 0.12));
  color: var(--warning-text, #fcd34d);
  border: 1px solid var(--warning-border, rgba(245, 158, 11, 0.3));
}

.bb-component-badge--info {
  background: var(--info-bg, rgba(59, 130, 246, 0.12));
  color: var(--info-text, #93c5fd);
  border: 1px solid var(--info-border, rgba(59, 130, 246, 0.3));
}

.bb-component-badge--neutral {
  background: var(--color-surface, rgba(255, 255, 255, 0.04));
  color: var(--text-secondary, rgba(255, 255, 255, 0.92));
  border: 1px solid var(--border, rgba(196, 126, 66, 0.28));
}

/* Sizes */
.bb-component-badge--sm {
  padding: 2px var(--space-xs, 8px);
  font-size: 0.75rem;
}

.bb-component-badge--lg {
  padding: var(--space-xs, 8px) var(--space-md, 16px);
  font-size: var(--type-micro-size, 0.8125rem);
}

/* With icon */
.bb-component-badge .bb-icon {
  width: 14px;
  height: 14px;
}

.bb-component-badge--lg .bb-icon {
  width: 16px;
  height: 16px;
}