.tag,
.badge {
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-c);
  line-height: 1;
}

/* Dot before label */
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.75;
}

/* Legacy tag variants → new tokens */
.tag-default { background: var(--surface-2); color: var(--text); }
.tag-primary { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.tag-hr      { background: var(--opp-tint);   color: var(--opp);       border-color: transparent; }
.tag-digital { background: var(--flexi-tint); color: var(--flexi);     border-color: transparent; }
.tag-horeca  { background: var(--money-tint); color: var(--money-ink); border-color: transparent; }
.tag-purple  { background: var(--primary-tint); color: var(--primary-ink); border-color: transparent; }
.tag-yellow  { background: var(--opp-tint);   color: var(--opp);       border-color: transparent; }

/* New semantic badges */
.badge--student { background: var(--primary-tint); color: var(--primary-ink); border-color: transparent; }
.badge--flexi   { background: var(--flexi-tint);   color: var(--flexi);       border-color: transparent; }
.badge--money   { background: var(--money-tint);   color: var(--money-ink);   border-color: transparent; }
.badge--opp     { background: var(--opp-tint);     color: var(--opp);         border-color: transparent; }
.badge--danger  { background: var(--danger-tint);  color: var(--danger);      border-color: transparent; }