/* ============================================================
   COMPONENT — Chip + Badge
   ============================================================ */

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font-heading);
  font-size: var(--fs-badge); font-weight: 500; color: var(--text-muted);
  cursor: pointer;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}
.chip:hover {
  border-color: var(--primary); color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 116, 75, 0.08);
}
.chip:active { transform: scale(0.96); transition-duration: 0.08s; }
.chip.active {
  background: var(--primary); color: #fff; border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(0, 116, 75, 0.18);
}

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-badge); font-weight: 600;
}
.badge-primary { background: var(--primary-50); color: var(--primary-dark); }
.badge-blue    { background: #e6f0fa; color: var(--secondary-blue); }
.badge-yellow  { background: #fef7d6; color: #8a6b00; }
.badge-orange  { background: #fff2dc; color: #a8540a; }
.badge-pink    { background: #fde4f1; color: #a81b75; }