/* ─────────────────────────────────────────────
   Convert Chip / pill — a labelled tag in one of four semantic colors.
   Use with tokens.css.
   ───────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.chip--blue   { background: var(--chip-blue-bg);   color: var(--chip-blue-text);   border-color: var(--chip-blue-border); }
.chip--violet { background: var(--chip-violet-bg); color: var(--chip-violet-text); border-color: var(--chip-violet-border); }
.chip--green  { background: var(--chip-green-bg);  color: var(--chip-green-text);  border-color: var(--chip-green-border); }
.chip--orange { background: var(--chip-orange-bg); color: var(--chip-orange-text); border-color: var(--chip-orange-border); }
.chip .ph { font-size: 14px; }