/**
 * Badges & Tags
 * Status indicators and labels
 */

/* ============================================
   BASE BADGE
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: all 0.2s ease;
}

/* ============================================
   BADGE VARIANTS
   ============================================ */
.badge-primary {
  background: rgba(226, 1, 205, 0.1);
  color: var(--primary);
  border: 1px solid rgba(226, 1, 205, 0.2);
}

.badge-secondary {
  background: rgba(31, 158, 158, 0.1);
  color: var(--secondary);
  border: 1px solid rgba(31, 158, 158, 0.2);
}

.badge-success {
  background: rgba(34, 197, 94, 0.1);
  color: rgb(34, 197, 94);
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-warning {
  background: rgba(251, 191, 36, 0.1);
  color: rgb(251, 191, 36);
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.badge-error {
  background: rgba(239, 68, 68, 0.1);
  color: rgb(239, 68, 68);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.badge-info {
  background: rgba(59, 130, 246, 0.1);
  color: rgb(59, 130, 246);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.badge-muted {
  background: var(--muted);
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

/* ============================================
   BADGE SIZES
   ============================================ */
.badge-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.625rem;
}

.badge-lg {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

/* ============================================
   TAGS
   ============================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 2rem;
  font-size: 0.875rem;
  color: var(--foreground);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tag:hover {
  background: rgba(226, 1, 205, 0.1);
  border-color: var(--primary);
  color: var(--primary);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ============================================
   DOT INDICATOR
   ============================================ */
.badge-dot {
  width: 6px;
  height: 6px;