/* ============================================================
   Badge + Tag (chip)
   ============================================================ */

.ws-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.ws-badge--small  { height: 18px; padding: 0 6px;  font-size: 11px; }
.ws-badge--medium { height: 22px; padding: 0 8px;  font-size: 12px; }

/* tinted (weak) */
.ws-badge--weak.ws-badge--primary  { background: var(--primary-assistive);        color: var(--primary-strong); }
.ws-badge--weak.ws-badge--neutral  { background: var(--fill-normal);              color: var(--label-neutral); }
.ws-badge--weak.ws-badge--positive { background: var(--green-95);                 color: var(--green-40); }
.ws-badge--weak.ws-badge--negative { background: var(--red-95);                   color: var(--red-40); }
.ws-badge--weak.ws-badge--cautionary{background: var(--orange-95);                color: var(--orange-40); }
.ws-badge--weak.ws-badge--violet   { background: var(--accent-background-violet); color: var(--accent-foreground-violet); }

/* solid */
.ws-badge--solid { color: var(--static-white); }
.ws-badge--solid.ws-badge--primary  { background: var(--primary-normal); }
.ws-badge--solid.ws-badge--neutral  { background: var(--cool-neutral-50); }
.ws-badge--solid.ws-badge--positive { background: var(--status-positive); }
.ws-badge--solid.ws-badge--negative { background: var(--status-negative); }
.ws-badge--solid.ws-badge--cautionary { background: var(--status-cautionary); }
.ws-badge--solid.ws-badge--violet   { background: var(--violet-50); }

/* ---- Tag / chip ---- */
.ws-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--label-neutral);
  background: var(--fill-normal);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: default;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ws-tag--medium { height: 34px; padding: 0 14px; font-size: 14px; }
.ws-tag--small  { height: 28px; padding: 0 10px; font-size: 13px; }
.ws-tag--selected {
  background: var(--primary-assistive);
  color: var(--primary-strong);
  border-color: color-mix(in srgb, var(--primary-normal) 32%, transparent);
  font-weight: var(--weight-semibold);
}
.ws-tag__remove {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: -4px; padding: 2px; border: 0; background: transparent;
  color: var(--label-alternative); cursor: pointer; border-radius: var(--radius-full);
}
.ws-tag__remove:hover { color: var(--label-normal); background: var(--fill-strong); }