Oi Geraldo, tudo bem?

Você está correto em sua observação sobre a nomeação de variáveis em CSS. A ideia é que os nomes sejam semânticos e descrevam a função da variável, e não o seu valor atual. Por exemplo, ao invés de nomear uma variável como --azul, seria mais apropriado usar um nome como --cor-primaria ou --cor-de-fundo, dependendo do uso da cor no seu projeto.

Dessa forma, se no futuro você decidir mudar a cor primária de azul para verde, você pode simplesmente atualizar o valor da variável --cor-primaria sem a necessidade de renomeá-la, mantendo o código mais fácil de entender e manter.

Um exemplo prático seria:

:root {
  --cor-primaria: #3498db; /* Azul */
  --cor-secundaria: #2ecc71; /* Verde */
}

button {
  background-color: var(--cor-primaria);
  border: 1px solid var(--cor-secundaria);
}

Se você decidir mudar a cor primária para verde, basta alterar o valor de --cor-primaria no seletor :root e todos os elementos que utilizam essa variável serão atualizados automaticamente:

:root {
  --cor-primaria: #2ecc71; /* Agora é Verde */
  --cor-secundaria: #3498db; /* Azul */
}

Assim, o nome da variável continua fazendo sentido e você não precisa alterar nada além do valor da variável.

Um abraço e bons estudos.