When declaring CSS variables, why is using single hyphens standard practice?

I'm creating a design system and working through how I want to structure my CSS variables. Many systems I've seen tend to only use single hyphens to describe the hierarchy of the variable. For example:

.Button {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
}

My question is: Is there any reason to avoid using other formats such as double underscores or double hyphens (__, --)? Similar to BEM, I think this could be an interesting way to indicate the intended usage of a variable. For example, you might use something like var(--color-btn__text--hover) to indicate that the color is intended to be used as the text color on a button that is in a hover state.

.Button {
  background: var(--color-btn__bg);
  border: 1px solid var(--color-btn__border);
  color: var(--color-btn__text);

  &:hover {
    background: var(--color-btn__bg--hover);
    color: var(--color-btn__text--hover);
    border: 1px solid var(--color-btn__border--hover);
  }
}

It works perfectly fine in my local testing, but curious if there are any other considerations to keep in mind?