/* ════════ Tag / Badge Component ════════ */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

/* ── Level tags ── */
.tag-beginner {
  background: var(--success-light);
  color: var(--success-text);
}
.tag-intermediate {
  background: var(--warning-light);
  color: var(--warning-text);
}
.tag-advanced {
  background: var(--danger-light);
  color: var(--danger-text);
}

/* ── Word type tags ── */
.tag-noun {
  background: var(--info-light);
  color: var(--info-text);
}
.tag-verb {
  background: var(--primary-light);
  color: var(--primary);
}
.tag-adjective {
  background: var(--success-light);
  color: var(--success-text);
}
.tag-adverb {
  background: color-mix(in srgb, var(--secondary) 12%, transparent);
  color: var(--secondary);
}
.tag-collocation,
.tag-phrasal-verb {
  background: var(--warning-light);
  color: var(--warning-text);
}