Aonde é correto usar a propiedade transition?

Olá, Fabyan, tudo bem?

A propriedade transition é geralmente aplicada no estado normal do elemento, não no estado alterado (como :hover). Isso ocorre porque a transition é usada para controlar a animação de transição de um estado para outro. Portanto, se você deseja que a cor do link mude suavemente quando o mouse passa sobre ele, você deve aplicar a transição no estado normal do link.

Tomando como base os exemplos que você trouxe em sua postagem, temos:

.lista__link a {
    text-decoration: none;
    color: var(--branco-principal);
    margin-left: 1em;
    transition: color 0.5s; /* AQUI */
}

.lista__link a:hover {
    color: var(--cinza-segundario);
    /* Não há necessidade de repetir a transição aqui */
}

E o mesmo se aplica ao botão:

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 8px;
    padding: 1em;
    color: var(--branco-principal);
    display: block;
    text-decoration: none;
    margin-bottom: 1em;
    transition: background-color 0.5s; /* AQUI */
}

.container__botao:hover {
    background-color: var(--botao-assine);
    /* Não há necessidade de repetir a transição aqui */
}

Dessa forma, a transição ocorrerá tanto ao passar o mouse sobre o elemento (entrando no estado :hover) quanto ao remover o mouse do elemento (saindo do estado :hover).

Caso queira mais informações sobre essa propriedade do CSS, recomendo a leitura da documentação abaixo. As informações estão em inglês e caso queira, você pode traduzir para o português, clicando com o botão direito do mouse e selecionando a opção "Traduzir para o português".

• CSS Transitions

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!