/* ==================================================
   Badge Components - Consolidated Styles
   Single source of truth for all badge patterns
   ================================================== */

/* Badge Base */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

/* Badge Semantic Variants (Tailwind-compatible) */
.badge-primary {
  @apply badge bg-primary-100 text-primary-800;
}

.badge-secondary {
  @apply badge bg-secondary-100 text-secondary-800;
}

.badge-success {
  @apply badge bg-success-100 text-success-800;
}

.badge-warning {
  @apply badge bg-warning-100 text-warning-800;
}

.badge-danger {
  @apply badge bg-danger-100 text-danger-800;
}

/* Badge App Branding Variants */
.badge-blue {
  background: rgba(74, 159, 216, 0.15);
  color: var(--app-accent-blue);
}

.badge-blue-hover:hover {
  background: rgba(74, 159, 216, 0.25);
}

.badge-secondary {
  background: rgba(138, 180, 207, 0.1);
  color: var(--app-text-secondary);
}

.badge-tertiary {
  background: rgba(90, 122, 143, 0.1);
  color: var(--app-text-tertiary);
}

.badge-success {
  background: rgba(107, 192, 112, 0.15);
  color: var(--app-accent-green);
}

.badge-warning {
  background: rgba(244, 197, 66, 0.15);
  color: var(--app-accent-yellow);
}

.badge-error {
  background: rgba(231, 111, 111, 0.15);
  color: var(--app-accent-red);
}

.badge-orange {
  color: var(--app-accent-orange);
}

/* Connection Strength Badge */
.strength-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.strength-badge.strong {
  background: rgba(107, 192, 112, 0.2);
  color: var(--app-accent-green);
}

.strength-badge.medium {
  background: rgba(244, 197, 66, 0.2);
  color: var(--app-accent-yellow);
}

.strength-badge.weak {
  background: rgba(138, 180, 207, 0.2);
  color: var(--app-text-secondary);
}

.strength-badge.new {
  background: rgba(138, 180, 207, 0.2);
  color: var(--app-text-secondary);
}

/* Relationship Badge */
.relationship-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
}

.relationship-badge.colleague {
  background: rgba(74, 159, 216, 0.2);
  color: var(--app-accent-blue);
}

.relationship-badge.friend {
  background: rgba(107, 192, 112, 0.2);
  color: var(--app-accent-green);
}

.relationship-badge.client {
  background: rgba(184, 118, 192, 0.2);
  color: var(--app-accent-magenta);
}

.relationship-badge.vendor {
  background: rgba(232, 154, 95, 0.2);
  color: var(--app-accent-orange);
}

.relationship-badge.partner {
  background: rgba(244, 197, 66, 0.2);
  color: var(--app-accent-yellow);
}

.relationship-badge.connection {
  background: rgba(138, 180, 207, 0.2);
  color: var(--app-text-secondary);
}

/* Skill Tag */
.skill-tag {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800;
}

/* Navigation Plan Badge */
.nav-plan-badge {
  padding: var(--space-3) var(--space-4);
}

/* Sybil Status Badge */
.sybil-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  box-shadow: 0 2px 4px rgba(184, 118, 192, 0.3);
  animation: pulse-gentle 2s ease-in-out infinite;
}

@keyframes pulse-gentle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.9; }
}

/* Tab Count Badge */
.tab-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  background: var(--app-bg-elevated);
  color: var(--app-text-secondary);
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 600;
}

.tab-count-badge {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.tab-count-badge-blue {
  background: rgba(74, 159, 216, 0.15);
  color: var(--app-accent-blue);
}

.tab-count-badge-neutral {
  background: rgba(138, 180, 207, 0.1);
  color: var(--app-text-secondary);
}

.tab-count-elevated {
  background: var(--app-bg-elevated);
  color: var(--app-text-secondary);
}

/* Keyboard Shortcut Badge */
.nav-shortcut {
  font-size: 11px;
  color: var(--app-text-tertiary);
  font-family: var(--font-mono);
}

.nav-link:hover .nav-shortcut {
  color: var(--app-text-secondary);
}

/* Sybil Avatar Badges */
.sybil-avatar-sm {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
}

.sybil-avatar-md {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
}

.sybil-avatar-lg {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
}

/* Sybil Icon with Gradient */
.sybil-icon-gradient {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--app-accent-magenta) 0%, var(--app-accent-orange) 100%);
}

/* Genome Badge (Icon-Only Inline) */
.badge-genome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: rgba(82, 197, 199, 0.1);
  border: 1px solid rgba(82, 197, 199, 0.3);
  color: var(--app-accent-teal);
  cursor: pointer;
  transition: all 0.2s ease;
}

.badge-genome:hover {
  background: rgba(82, 197, 199, 0.15);
  border-color: var(--app-accent-teal);
  transform: scale(1.05);
}

/* Research Badge (Icon-Only Inline) */
.badge-research {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  background: rgba(74, 159, 216, 0.1);
  border: 1px solid rgba(74, 159, 216, 0.3);
  color: var(--app-accent-blue);
  cursor: pointer;
  transition: all 0.2s ease;
}

.badge-research:hover {
  background: rgba(74, 159, 216, 0.15);
  border-color: var(--app-accent-blue);
  transform: scale(1.05);
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sybil-status-badge {
    animation: none;
  }

  .badge-genome:hover,
  .badge-research:hover {
    transform: none;
  }
}