/* ============================================
   DAGDA TEMPLATE - Tags
   Étiquettes avec effet glow
   ============================================ */

@layer components {
  .tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 1rem;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    transition: all var(--transition-base);
    cursor: pointer;
    
    &:hover {
      background: var(--prim-glow);
      border-color: var(--prim-dim);
      color: var(--prim-bright);
      box-shadow: 0 0 12px var(--prim-glow);
      transform: translateY(-1px);
    }
  }
  
  /* ========== TAG CONTAINERS ========== */
  
  /* Tags wrapper (horizontal list) */
  .tags-wrapper {
    display: flex;
    gap: 0.75rem;
  }
  
  /* Tags grid (wrapping) */
  .tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}