How to override Payload's built-in CSS variables?

I'm encountering an issue with override variables in scss file. I have created my own :root to override CSS variables, but my changes are not taking effect.

I had to add !important to override the style of a rich-text class. I'm concerned that this is not a best practice.
Can you please help me figure out why my :root is not working, and suggest a better way to override CSS variables?

Thank you for your help.

root {
  --font-serif: 'Suisse Intl', system-ui;
}

.rich-text__editor {
  font-family: 'Suisse Intl', system-ui !important;
}