/**
 * Tag component — content classifier pill.
 *
 * Distinct from .badge:
 *   .badge → status indicator (Active, Featured, New) — solid color, semantic state
 *   .tag   → content classifier (Case Study, Blog, Whitepaper) — soft tinted background
 *
 * Used inside cards (blog/event/case-study), search results, filter chips,
 * and anywhere a piece of content needs a "what type is this" label.
 *
 * Token source: tokens.css §21 --tag-* block.
 *
 * @package Vimta
 */

@layer components {

  /* ── Base ────────────────────────────────────────────────────────── */
  .tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding-block: var(--tag-padding-block);
    padding-inline: var(--tag-padding-inline);
    font-size: var(--tag-font-size);
    font-weight: var(--tag-font-weight);
    font-family: var(--font-body);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    border-radius: var(--tag-radius);
    width: fit-content;
    white-space: nowrap;
  }


  /* ── Color variants — token-driven, all WCAG verified ─────────────
     Each variant pairs a tinted background with an accessible text
     colour. New types are added by extending the token set, not by
     hardcoding here. */

  .tag--case-study {
    background: var(--tag-case-study-bg);
    color: var(--tag-case-study-text);
  }

  .tag--blog {
    background: var(--tag-blog-bg);
    color: var(--tag-blog-text);
  }

  .tag--whitepaper {
    background: var(--tag-whitepaper-bg);
    color: var(--tag-whitepaper-text);
  }

  .tag--event {
    background: var(--tag-event-bg);
    color: var(--tag-event-text);
  }

  /* Featured / overlay variant — for tags that sit ON TOP of an image
     or dark background. Uses frosted glass where supported, falls back
     to opaque when backdrop-filter is unavailable. */
  .tag--overlay {
    background: var(--tag-overlay-bg);
    color: var(--tag-overlay-text);

    @supports (backdrop-filter: blur(1px)) {
      background: color-mix(in oklch, var(--primary) 72%, transparent);
      backdrop-filter: blur(6px);
    }
  }

}