I just learned about CSS variables last week so I’m sharing it with you.

CSS variables work like assigning a value to a variable and you can create global variables and local variables.

Global CSS Variables are set in within the “root:” selector. Many WordPress theme developers use global CSS variables because its easy to control the theme styles.

To override any of these CSS variables, create your CSS like normal by stating which selector you want to edit, then instead of specifying the attribute name, you’re going to use the CSS variable name. Next, you need to assign the value to the attribute

Here’s an example of changing the colour of your links:

a:where(:not(.wp-element-button)) {
   --wp--preset--color--raft-fg: #1763b6;
   color: var(--wp--preset--color--raft-fg);
}

I hope this helps you.