/* ==========================================================================
   Étiquettes et couleurs d'éléments — public/css/components/tags.css
   « Couleur = élément du caractère » (jamais la position) : une classe
   `.el-wood` … `.el-water` pose --el (glyphes, traits), --el-ink (texte
   coloré ≥ 4,5:1) et --el-soft (fond teinté) pour tout ce qu'elle contient.
   ========================================================================== */

.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  font: 600 12px/1 var(--font-ui); letter-spacing: .04em; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap;
}
.tag--free { color: var(--wood-ink); border-color: color-mix(in srgb, var(--wood) 45%, transparent); background: var(--wood-soft); }
.tag--paid { color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }

.el-wood { --el: var(--wood); --el-ink: var(--wood-ink); --el-soft: var(--wood-soft); }
.el-fire { --el: var(--fire); --el-ink: var(--fire-ink); --el-soft: var(--fire-soft); }
.el-earth { --el: var(--earth); --el-ink: var(--earth-ink); --el-soft: var(--earth-soft); }
.el-metal { --el: var(--metal); --el-ink: var(--metal-ink); --el-soft: var(--metal-soft); }
.el-water { --el: var(--water); --el-ink: var(--water-ink); --el-soft: var(--water-soft); }

/* Étiquette d'élément : `<span class="tag el-wood">` prend les teintes de son élément. */
.tag[class*="el-"] { color: var(--el-ink); border-color: color-mix(in srgb, var(--el) 45%, transparent); background: var(--el-soft); }