/* badge.css - Badge / chip styles */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  line-height: 1.5;
  white-space: nowrap;
}

/* --- Coral (used for category tags etc.) ---------------------- */
.badge--coral {
  background: var(--cal-coral-soft);
  /* coral-darker text — used only here per design-system spec */
  color: #9A3412;
}
.badge--coral::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cal-coral);
  flex-shrink: 0;
}

/* --- Teal (status: active, primary) --------------------------- */
.badge--teal {
  background: var(--cal-teal-tint);
  color: var(--cal-teal-dark);
}
.badge--teal::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cal-teal);
  flex-shrink: 0;
}

/* --- Neutral (draft, muted) ----------------------------------- */
.badge--neutral {
  background: var(--cal-bg-soft);
  color: var(--cal-text-sub);
}

/* --- Solid (Pro, premium) ------------------------------------- */
.badge--solid {
  background: var(--cal-teal-dark);
  color: var(--cal-white);
}