/* ==========================================================================
   Badge Component
   Unified badge styles for labels, counts, and role indicators
   ========================================================================== */

.badge {
  display: inline-block;
  padding: var(--padding-badge);
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.4;
  background: var(--parchment-300);
  color: var(--grey-700);
}

.badge--muted {
  background: var(--parchment-200);
  color: var(--grey-500);
}

.badge--pill {
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  background: var(--grey-500);
  color: var(--parchment-light);
}

.badge--role {
  font-family: var(--font-ui);
  font-size: 0.65rem;
  background: var(--campaign-primary-color, var(--warm-grey));
  color: var(--parchment-light);
}

/* Named color overrides via BadgeComponent color: parameter */
.badge--color-plot-status-active {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--color-plot-status-seed {
  background: var(--color-info-bg);
  color: var(--color-info);
}