/**
 * Badge Components
 *
 * Reusable badge styles for counts, status indicators, and labels
 * across the entire site.
 */

/* Base Badge */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Count Badge (for project counts, etc.) */
.badge--count {
  background: rgba(var(--accent-primary-rgb), 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
}

/* Status Badge (for workshop status, etc.) */
.badge--status {
  background: var(--border-subtle);
  border: 1px solid var(--border-medium);
  color: rgba(255, 255, 255, 0.7);
}

/* Upcoming/Future Badge */
.badge--upcoming {
  background: rgba(var(--accent-primary-rgb), 0.15);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.3);
  color: var(--accent-primary);
}

/* Media Type Badge */
.badge--media {
  background: var(--glass-medium);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(226, 227, 234, 0.75);
}

/* Small Badge Variant */
.badge--small {
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
  letter-spacing: 0.03em;
}

/* Large Badge Variant */
.badge--large {
  font-size: 0.85rem;
  padding: 0.4rem 0.8rem;
}

/* Light Theme */
html[data-theme="light"] .badge--count {
  background: rgba(var(--accent-primary-rgb), 0.12);
  color: var(--accent-primary);
  border-color: rgba(var(--accent-primary-rgb), 0.25);
}

html[data-theme="light"] .badge--status {
  background: var(--glass-medium);
  border-color: var(--border-subtle);
  color: rgba(32, 36, 52, 0.7);
}

html[data-theme="light"] .badge--upcoming {
  background: rgba(var(--accent-primary-rgb), 0.12);
  border-color: rgba(var(--accent-primary-rgb), 0.25);
  color: var(--accent-primary);
}

html[data-theme="light"] .badge--media {
  background: var(--glass-medium);
  border-color: var(--border-subtle);
  color: rgba(32, 36, 52, 0.7);
}