`rainbow-mode` highlights colors in places where it shouldn't (e.g. variable names)

### What did you expect to happen?

I expected CSS custom properties that have css color names to not have syntax highlighting like this:

### What actually happened?

There is incorrect syntax highlighting for CSS color names in custom properties in .css files when scss-mode is enabled:

### Describe your attempts to resolve the issue

- I tried disabling `scss-mode`.
`(disable-packages! scss-mode)`

- I tried setting `auto-mode-alist` for scss-mode and css-mode
```elisp
(add-to-list 'auto-mode-alist '("\\.css\\'" . css-mode))
(add-to-list 'auto-mode-alist '("\\.scss\\'" . scss-mode))
```

### Steps to reproduce

Open a `.css` file and add the following example code:

```css
.component {
--red-100: #FF4500;
--invalid-background-color: var(--red-100);
}
```

### System Information

https://pastebin.com/RBCAaFpZ

Reproduce the highlighting issue in a .css file with scss-mode enabled, using the provided custom-property example, then inspect the interaction between rainbow-mode and scss-mode. Done means CSS custom-property names such as --red-100 are not highlighted as colors, while actual color values remain highlighted.

Written by the indexing model from the issue text.