.site-header .header-topbar:not(.color-layout-black) .theme-mode-toggle .header-light-background {
    background-color: var(--color-cool100) !important;
}

.header-topbar.color-layout-custom.dark-blue .theme-mode-toggle:hover .header-light-background {
    background-color: var(--color-cool50) !important;
}
h1, h2, h3, h4, h5, h6, p, a {
  font-family: 'Brilliant Cut Pro Medium', sans-serif !important;
}
body {
    font-family: 'Fancy Cut Pro', sans-serif;
}

/* Change button color from green to gray */
button {
    /* Change from green to gray using the existing color variables */
    background-color: var(--color-gray700); /* Changed from --color-green700 */
    border-color: transparent;
    color: #FFF;
}

/* If you want to add hover state as well */
button:hover {
    background-color: var(--color-gray800);
    transition: background-color 0.15s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Alternatively, if you prefer to use the cool gray palette instead */
.button-cool-gray {
    background-color: var(--color-cool700);
    border-color: transparent;
    color: #FFF;
}

.button-cool-gray:hover {
    background-color: var(--color-cool800);
}


