color How do I use Squarespace color variables in my CSS?

Site password: colorcodehelp

There are variables in for the colors that are changed throughout the code whenever you change the color palette. I want to use those so I can stop having to copy and paste the hex codes or the hsl numbers every time I want to add something within the color palette. Is there a way for me to start using those variables?

For example I found this code:

<style id="colorThemeStyles">
    :root {
        --white-hsl: 41.54, 23.64%, 89.22%;
        --black-hsl: 60, 3.45%, 17.06%;
        --safeLightAccent-hsl: 176.9, 28.16%, 59.61%;
        --safeDarkAccent-hsl: 60, 3.45%, 17.06%;
        --safeInverseAccent-hsl: 60, 3.45%, 17.06%;
        --safeInverseLightAccent-hsl: 60, 3.45%, 17.06%;
        --safeInverseDarkAccent-hsl: 41.54, 23.64%, 89.22%;
        --accent-hsl: 176.9, 28.16%, 59.61%;
        --lightAccent-hsl: 44.27, 74.1%, 72.75%;
        --darkAccent-hsl: 211.46, 49.76%, 40.59%;
    }

    .white {
        --announcement-bar-background-color: hsla(var(--black-hsl), 1);
        --announcement-bar-text-color: hsla(var(--white-hsl), 1);
        --backgroundOverlayColor: hsla(var(--white-hsl), 1);
... and so on

I see the colors there in that root tag, and I want to use it elsewhere, like in shadows or the effect on my site whenever you hover over a blog post link. I am still experimenting with color, so I want to figure out how to change all the effects at the same time rather than going into the color panel and then to the CSS code panel.

Thank you!

this isn't the IDEAL solution, I'd much rather use the variables themselves, but I also am not making a restaurant, so I was able to map the menu block colors to the five different palette colors. Thank you!

Example:

• WHITE: var(--tweak-menu-block-nav-color)
• LIGHT ACCENT: var(--tweak-menu-block-title-color)
• ACCENT: var(--tweak-menu-block-item-title-color)
• DARK ACCENT: var(--tweak-menu-block-item-description-color)
• BLACK: var(--tweak-menu-block-item-price-color)

in practice:

.header-title-logo img, .header-mobile-logo img {
    filter: 
      invert(1) 
      drop-shadow(0px 0px var(--tweak-menu-block-item-title-color)) 
      drop-shadow(0px 0px var(--tweak-menu-block-title-color));
    transition: all 0.25s ease-in-out !important;
  }