/* ===== BADGES — Pill-shaped, colored ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.badge--blue {
  background: var(--color-blue-light);
  color: var(--color-blue);
}

.badge--green {
  background: var(--color-green-light);
  color: var(--color-green);
}

.badge--orange {
  background: var(--color-orange-light);
  color: var(--color-orange);
}

.badge--purple {
  background: var(--color-purple-light);
  color: var(--color-purple);
}

.badge--yellow {
  background: var(--color-yellow-light);
  color: var(--color-yellow);
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}