/* badges.css — Tier badges, post type badges, pills */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  line-height: 1.4;
  white-space: nowrap;
}

.badge--newcomer { background-color: var(--color-surface-2); color: var(--color-tier-newcomer); }
.badge--builder { background-color: var(--color-success-light); color: var(--color-tier-builder); }
.badge--expert { background-color: var(--color-primary-light); color: var(--color-tier-expert); }
.badge--fellow { background-color: var(--color-warning-light); color: var(--color-tier-fellow); }

.badge--junior { background-color: var(--color-surface-2); color: var(--color-text-secondary); }
.badge--mid { background-color: var(--color-info-light); color: var(--color-info); }
.badge--senior { background-color: var(--color-primary-light); color: var(--color-primary); }
.badge--lead { background-color: var(--color-warning-light); color: var(--color-warning); }

.badge--case-study { background-color: var(--color-primary-light); color: var(--color-primary); }
.badge--shot { background-color: var(--color-accent-light); color: var(--color-accent); }
.badge--resource { background-color: var(--color-success-light); color: var(--color-success); }

.badge--open { background-color: var(--color-success-light); color: var(--color-success); }
.badge--voting { background-color: var(--color-warning-light); color: var(--color-warning); }
.badge--closed { background-color: var(--color-surface-2); color: var(--color-text-muted); }

.badge--pro {
  background: linear-gradient(135deg, var(--color-accent), #FF8F5C);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
}

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--space-3);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.pill:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
.pill--active { background-color: var(--color-primary-light); color: var(--color-primary); font-weight: var(--weight-semibold); }