/* ===========================================
   Badge System - Refined Design
   =========================================== */

.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;
  line-height: 1;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

/* 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
   =========================================== */

.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);
  font-family: var(--font-mono);
}

.badge--uppercase {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  font-size: 10px;
  font-weight: var(--font-semibold);
}

.badge--gradient {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.badge--outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* ===========================================
   Interactive Badges
   =========================================== */

.badge--interactive {
  cursor: pointer;
}

.badge--interactive:hover {
  transform: scale(1.02);
}

/* ===========================================
   Badge with Icon
   =========================================== */

.badge svg,
.badge img {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.badge--lg svg,
.badge--lg img {
  width: 14px;
  height: 14px;
}

/* ===========================================
   Badge Dot Indicator
   =========================================== */

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

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

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

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

/* Animated pulse for status indicators */
.badge__dot--pulse {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===========================================
   Badge Group
   =========================================== */

.badge-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .badge,
  .badge__dot--pulse {
    animation: none;
    transition: none;
  }
}