How can CSS variables be utilized in Next.js to enable page-specific style changes without the need for creating multiple classes?

Question

How to use CSS variables in Next.js, where a style can change from page to page without having to create multiple classes? This example is how I do it in pure HTML and CSS, but I want to create three versions of a homepage and only vary the color in one style.css file without affecting the global styles or resorting to CSS-in-JS.

"I am hoping to achieve the same but using Next.js."