/* badges.css */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semi);
  border-radius: var(--radius-full);
  background: var(--clr-surface-3);
  color: var(--clr-text-2);
}

.badge--pro {
  background: var(--clr-primary);
  color: #fff;
}

.badge--accent {
  background: var(--clr-primary-light);
  color: var(--clr-primary);
}

.badge--success { background: rgba(61, 184, 138, 0.15); color: var(--clr-success); }
.badge--popular {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  background: var(--clr-primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}