If you don't care to read the link, here is the TLDR: CSS variables can effect parts of a calculation or gradient. With "normal" CSS you can only change the whole property. You can use them to do all kinds of things when you build a website. Today we're using it to play!
--main is the background for the header, and most blocks/content with a solid background.
--main-accent is mostly used in gradients with
--main-text is the colour of all plain text.
The background colour for the site, header, and most body copy!
--secondary-accent is combined with
--secondary to form the main background gradient.
--interactive is the colour of links, buttons, inputs, and other clickables!