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

[NammDev]

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;
}

[NammDev]

Sorry guys, I forgot to add semicolon : before root. Now it's working perfect

Thank you for all the hard work and dedication you have put into developing Payload CMS. The ease of use and flexibility of the platform is truly outstanding