:root {
    --fondant-hue-1: #0e1e3f; /* Blue Zodiac */
    --fondant-hue-2: #2550a7; /* Cerulean Blue */
    --fondant-hue-3: #507dd8; /* Havelock Blue */
    --fondant-hue-4: #e63c2d; /* Cinnabar */
    --fondant-hue-5: #971b11; /* Tamarillo */
    --fondant-hue-6: #121212; /* Cod Gray */
    --fondant-hue-grey: #58595b; /* Abbey */
    --fondant-hue-grey-lite: #a9b4bf; /* Cadet Blue */
    --fondant-hue-grey-dark: #333333; /* Mine Shaft */
    --fondant-hue-white: #ffffff; /* White */
    --fondant-hue-black: #000000; /* Black */

    --fondant-hue-blue-zodiac: var(--fondant-hue-1);
    --fondant-hue-cerulean-blue: var(--fondant-hue-2);
    --fondant-hue-havelock-blue: var(--fondant-hue-3);
    --fondant-hue-cinnabar: var(--fondant-hue-4);
    --fondant-hue-tamarillo: var(--fondant-hue-5);
    --fondant-hue-cod-gray: var(--fondant-hue-6);
    --fondant-hue-abbey: var(--fondant-hue-grey);
    --fondant-hue-cadet-blue: var(--fondant-hue-grey-lite);
    --fondant-hue-mine-shaft: var(--fondant-hue-grey-dark);
}

.has-blue-zodiac-color {
     color: var(--fondant-hue-blue-zodiac);
     border-color: var(--fondant-hue-blue-zodiac);
}
.has-blue-zodiac-background-color {
     background-color: var(--fondant-hue-blue-zodiac);
     border-color: var(--fondant-hue-blue-zodiac);
}
.has-cerulean-blue-color {
     color: var(--fondant-hue-cerulean-blue);
     border-color: var(--fondant-hue-cerulean-blue);
}
.has-cerulean-blue-background-color {
     background-color: var(--fondant-hue-cerulean-blue);
     border-color: var(--fondant-hue-cerulean-blue);
}
.has-havelock-blue-color {
     color: var(--fondant-hue-havelock-blue);
     border-color: var(--fondant-hue-havelock-blue);
}
.has-havelock-blue-background-color {
     background-color: var(--fondant-hue-havelock-blue);
     border-color: var(--fondant-hue-havelock-blue);
}
.has-cinnabar-color {
     color: var(--fondant-hue-cinnabar);
     border-color: var(--fondant-hue-cinnabar);
}
.has-cinnabar-background-color {
     background-color: var(--fondant-hue-cinnabar);
     border-color: var(--fondant-hue-cinnabar);
}
.has-tamarillo-color {
     color: var(--fondant-hue-tamarillo);
     border-color: var(--fondant-hue-tamarillo);
}
.has-tamarillo-background-color {
     background-color: var(--fondant-hue-tamarillo);
     border-color: var(--fondant-hue-tamarillo);
}
.has-cod-gray-color {
     color: var(--fondant-hue-cod-gray);
     border-color: var(--fondant-hue-cod-gray);
}
.has-cod-gray-background-color {
     background-color: var(--fondant-hue-cod-gray);
     border-color: var(--fondant-hue-cod-gray);
}
.has-abbey-color {
     color: var(--fondant-hue-abbey);
     border-color: var(--fondant-hue-abbey);
}
.has-abbey-background-color {
     background-color: var(--fondant-hue-abbey);
     border-color: var(--fondant-hue-abbey);
}
.has-cadet-blue-color {
     color: var(--fondant-hue-cadet-blue);
     border-color: var(--fondant-hue-cadet-blue);
}
.has-cadet-blue-background-color {
     background-color: var(--fondant-hue-cadet-blue);
     border-color: var(--fondant-hue-cadet-blue);
}
.has-mine-shaft-color {
     color: var(--fondant-hue-mine-shaft);
     border-color: var(--fondant-hue-mine-shaft);
}
.has-mine-shaft-background-color {
     background-color: var(--fondant-hue-mine-shaft);
     border-color: var(--fondant-hue-mine-shaft);
}
.has-white-color {
     color: var(--fondant-hue-white);
     border-color: var(--fondant-hue-white);
}
.has-white-background-color {
     background-color: var(--fondant-hue-white);
     border-color: var(--fondant-hue-white);
}
.has-black-color {
     color: var(--fondant-hue-black);
     border-color: var(--fondant-hue-black);
}
.has-black-background-color {
     background-color: var(--fondant-hue-black);
     border-color: var(--fondant-hue-black);
}