Olá, aqui está o código com a minha resolução.
const html = document.querySelector('html') const focoBt = document.querySelector('.app__card-button--foco') const curtoBt = document.querySelector('.app__card-button--curto') const longBt = document.querySelector('.app__card-button--longo')
focoBt.addEventListener('click', ()=>{ html.setAttribute('data-contexto', 'foco') }) curtoBt.addEventListener('click', ()=>{ html.setAttribute('data-contexto', 'short') }) longBt.addEventListener('click', ()=>{ html.setAttribute('data-contexto', 'long') })
O css tem atributos diferentes, então preferi mudar eles no html. Agora tudo está funcionando!
