:root {
    /* --- colors --- */
    /* Light Tones */
    --light-mere: #D2E6E5;
    --light-fjord: #D0DBDD;
    --light-cabernet: #F5E9EE;
    --light-golden: #FFF7E6;

    /* Tints */
    --tint-fjord: #73929A;
    --tint-mere: #78B5B2;
    --tint-cabernet: #B27994;

    /* brand */
    --cabernet: #7E204D;
    --ashtone: #242731;
    --fjord: #154956;
    --mustard: #FFB833;
    --golden: #A79679;
    --mere: #1E847F;
    --cloud: #EBF5F7;
    /*F5F9FA*/



    /* functional */
    --danger-red: #FF0000;
    --form-selects: #0088FF;

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #F5F5F5;
    --mid-grey: #D8D8D8;
    --dark-grey: #999999;
    --black: #000000;
    --text-black : #2A2A2A;
}

/* Light Tones */
.light-mere {
    color: var(--light-mere);
}
.light-mere_background {
    background-color: var(--light-mere);
}
.light-fjord {
    color: var(--light-fjord);
}
.light-fjord_background {
    background-color: var(--light-fjord);
}
.light-cabernet {
    color: var(--light-cabernet);
}
.light-cabernet_background {
    background-color: var(--light-cabernet);
}
.light-golden {
    color: var(--light-golden);
}
.light-golden_background {
    background-color: var(--light-golden);
}

/* Tints */
.tint-mere {
    color: var(--tint-mere);
}
.tint-mere_background {
    background-color: var(--tint-mere);
}
.tint-fjord {
    color: var(--tint-fjord);
}
.tint-fjord_background {
    background-color: var(--tint-fjord);
}
.tint-cabernet {
    color: var(--tint-cabernet);
}
.tint-cabernet_background {
    background-color: var(--tint-cabernet);
}

/* Brand */
.cabernet {
    color: var(--cabernet);
}
.cabernet_background {
    background-color: var(--cabernet);
}

.ashtone {
    color: var(--ashtone);
}
.ashtone_background {
    background-color: var(--ashtone);
}

.fjord {
    color: var(--fjord);
}
.fjord_background {
    background-color: var(--fjord);
}

.mustard {
    color: var(--mustard);
}
.mustard_background {
    background-color: var(--mustard);
}

.golden {
    color: var(--golden);
}
.golden_background {
    background-color: var(--golden);
}

.mere {
    color: var(--mere);
}
.mere_background {
    background-color: var(--mere);
}

.cloud {
    color: var(--cloud);
}
.cloud_background {
    background-color: var(--cloud);
}

/* Functional */
.danger-red {
    color: var(--danger-red);
}
.danger-red_background {
    background-color: var(--danger-red);
}



/* Monotones */
.white {
    color: var(--white);
}
.white_background {
    background-color: var(--white);
}

.light-grey {
    color: var(--light-grey);
}
.light-grey_background {
    background-color: var(--light-grey);
}

.mid-grey {
    color: var(--mid-grey);
}
.mid-grey_background {
    background-color: var(--mid-grey);
}

.dark-grey {
    color: var(--dark-grey);
}
.dark-grey_background {
    background-color: var(--dark-grey);
}

.black {
    color: var(--black);
}
.black_background {
    background-color: var(--black);
}

.text-black {
    color: var(--text-black);
}
.text-black_background {
    background-color: var(--text-black);
}





/* Text Color Selection */
::selection {
    background: var(--black); /* WebKit/Blink Browsers */
    color: var(--white);
}
::-moz-selection {
    background: var(--black); /* Gecko Browsers */
    color: var(--white);
}






/* default fonts */
p {
    color: var(--text-black);
}
a:not(.button) {
    color: var(--text-black);
}






/* Color Overrides */
/* --- cloud_background --- */
.cloud_background h1,
.cloud_background h2,
.cloud_background h3,
.cloud_background h4,
.cloud_background h5,
.cloud_background h6,
.cloud_background .h1style,
.cloud_background .h2style,
.cloud_background .h3style,
.cloud_background .h4style,
.cloud_background .h5style,
.cloud_background .h6style,
.cloud_background ul li,
.cloud_background ul li a {
    color: var(--text-black);
}
.cloud_background p {
    color: var(--text-black);
    /*opacity: 0.8;*/
}
.cloud_background p.sub-heading,
.cloud_background div.sub-heading p {
    color: var(--text-black);
}
.cloud_background p.accent-text,
.cloud_background div.accent-text p {
    color: var(--text-black);
}
/* primary button */
.cloud_background a.button.primary,
.cloud_background button.primary {
    background-color: var(--fjord);
    border-color: var(--fjord);
    color: var(--white);
}
/* --- cabernet_background --- */
.cabernet_background h1,
.cabernet_background h2,
.cabernet_background h3,
.cabernet_background h4,
.cabernet_background h5,
.cabernet_background h6,
.cabernet_background .h1style,
.cabernet_background .h2style,
.cabernet_background .h3style,
.cabernet_background .h4style,
.cabernet_background .h5style,
.cabernet_background .h6style,
.cabernet_background ul li,
.cabernet_background ul li a {
    color: var(--white);
}
.cabernet_background p {
    color: var(--white);
}
.cabernet_background p.sub-heading,
.cabernet_background div.sub-heading p {
    color: var(--white);
}
.cabernet_background p.accent-text,
.cabernet_background div.accent-text p {
    color: var(--white);
}
/* primary button */
.cabernet_background a.button.primary,
.cabernet_background button.primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--text-black);
}
.cabernet_background a.button.primary:hover,
.cabernet_background button.primary:hover {
    background-color: var(--light-cabernet);
    border-color: var(--light-cabernet);
    color: var(--text-black);
}
/* secondary button */
.cabernet_background a.button.secondary,
.cabernet_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}

/* --- ashtone_background --- */
.ashtone_background h1,
.ashtone_background h2,
.ashtone_background h3,
.ashtone_background h4,
.ashtone_background h5,
.ashtone_background h6,
.ashtone_background .h1style,
.ashtone_background .h2style,
.ashtone_background .h3style,
.ashtone_background .h4style,
.ashtone_background .h5style,
.ashtone_background .h6style,
.ashtone_background ul li,
.ashtone_background ul li a {
    color: var(--white);
}
.ashtone_background p {
    color: var(--white);
}
.ashtone_background p.sub-heading,
.ashtone_background div.sub-heading p {
    color: var(--white);
}
.ashtone_background p.accent-text,
.ashtone_background div.accent-text p {
    color: var(--white);
}
/* secondary button */
.ashtone_background a.button.secondary,
.ashtone_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}
/* --- fjord_background --- */
.fjord_background h1,
.fjord_background h2,
.fjord_background h3,
.fjord_background h4,
.fjord_background h5,
.fjord_background h6,
.fjord_background .h1style,
.fjord_background .h2style,
.fjord_background .h3style,
.fjord_background .h4style,
.fjord_background .h5style,
.fjord_background .h6style,
.fjord_background ul li,
.fjord_background ul li a {
    color: var(--white);
}
.fjord_background p {
    color: var(--white);
}
.fjord_background p.sub-heading,
.fjord_background div.sub-heading p {
    color: var(--white);
}
.fjord_background p.accent-text,
.fjord_background div.accent-text p {
    color: var(--white);
}
/* secondary button */
.fjord_background a.button.secondary,
.fjord_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}

/* --- mustard_background --- */
.mustard_background h1,
.mustard_background h2,
.mustard_background h3,
.mustard_background h4,
.mustard_background h5,
.mustard_background h6,
.mustard_background .h1style,
.mustard_background .h2style,
.mustard_background .h3style,
.mustard_background .h4style,
.mustard_background .h5style,
.mustard_background .h6style,
.mustard_background ul li,
.mustard_background ul li a {
    color: var(--text-black);
}
.mustard_background p {
    color: var(--text-black);
    opacity: 0.8;
}
.mustard_background p.sub-heading,
.mustard_background div.sub-heading p {
    color: var(--text-black);
}
.mustard_background p.accent-text,
.mustard_background div.accent-text p {
    color: var(--text-black);
}
/* primary button */
.mustard_background a.button.primary,
.mustard_background button.primary {
    background-color: var(--text-black);
    border-color: var(--text-black);
    color: var(--white);
}
/* --- mere_background --- */
.mere_background h1,
.mere_background h2,
.mere_background h3,
.mere_background h4,
.mere_background h5,
.mere_background h6,
.mere_background .h1style,
.mere_background .h2style,
.mere_background .h3style,
.mere_background .h4style,
.mere_background .h5style,
.mere_background .h6style,
.mere_background ul li,
.mere_background ul li a {
    color: var(--white);
}
.mere_background p {
    color: var(--white);
}
.mere_background p.sub-heading,
.mere_background div.sub-heading p {
    color: var(--white);
}
.mere_background p.accent-text,
.mere_background div.accent-text p {
    color: var(--white);
}
/* primary button */
.mere_background a.button.primary,
.mere_background button.primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--text-black);
}
.mere_background a.button.primary:hover,
.mere_background button.primary:hover {
    background-color: var(--light-mere);
    border-color: var(--light-mere);
    color: var(--text-black);
}
/* secondary button */
.mere_background a.button.secondary,
.mere_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}

/* arrow button */
.mere_background a.button.arrow {
    background-color: var(--white);
    border-color: var(--white);
    background-image: url(../buttons/assets/arrow/dark-arrow.svg);
}
.mere_background a.button.arrow:hover {
    background-color: var(--cloud);
    border-color: var(--cloud);
    background-image: url(../buttons/assets/arrow/dark-arrow.svg);
}
/* --- golden_background --- */
.golden_background h1,
.golden_background h2,
.golden_background h3,
.golden_background h4,
.golden_background h5,
.golden_background h6,
.golden_background .h1style,
.golden_background .h2style,
.golden_background .h3style,
.golden_background .h4style,
.golden_background .h5style,
.golden_background .h6style,
.golden_background ul li,
.golden_background ul li a {
    color: var(--white);
}
.golden_background p {
    color: var(--white);
}
.golden_background p.sub-heading,
.golden_background div.sub-heading p {
    color: var(--white);
}
.golden_background p.accent-text,
.golden_background div.accent-text p {
    color: var(--white);
}
/* primary button */
.golden_background a.button.primary,
.golden_background button.primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--text-black);
}
.golden_background a.button.primary:hover,
.golden_background button.primary:hover {
    background-color: var(--light-golden);
    border-color: var(--light-golden);
    color: var(--text-black);
}

/** light cabernet background **/
.light-cabernet_background a.button.primary,
.light-cabernet_background button.primary {
    background-color: var(--cabernet);
    border-color: var(--cabernet);
    color: var(--white);
}
.light-cabernet_background a.button.primary:hover,
.light-cabernet_background button.primary:hover {
    background-color: var(--tint-cabernet);
    border-color: var(--tint-cabernet);
    color: var(--white);
}
/* --- black_background --- */
.black_background h1,
.black_background h2,
.black_background h3,
.black_background h4,
.black_background h5,
.black_background h6,
.black_background .h1style,
.black_background .h2style,
.black_background .h3style,
.black_background .h4style,
.black_background .h5style,
.black_background .h6style,
.black_background ul li,
.black_background ul li a {
    color: var(--white);
}
.black_background p {
    color: var(--white);
}
.black_background p.sub-heading,
.black_background div.sub-heading p {
    color: var(--white);
}
.black_background p.accent-text,
.black_background div.accent-text p {
    color: var(--white);
}
/* primary button */
.black_background a.button.primary,
.black_background button.primary {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}
.black_background a.button.primary:hover,
.black_background button.primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}
/* secondary button */
.black_background a.button.secondary,
.black_background button.secondary {
    border-color: var(--white);
    color: var(--white);
}
.black_background a.button.secondary:hover,
.black_background button.secondary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}
/* tertiary button */
.black_background a.button.tertiary,
.black_background button.tertiary {
    color: var(--white);
}
.black_background a.button.tertiary:before,
.black_background button.tertiary:before {
    background-color: var(--white);
}
.black_background a.button.tertiary:after,
.black_background button.tertiary:after {
    background-image: url('../buttons/assets/tertiary/white_arrow.svg');
}
/* tab button */
.black_background a.button.tab,
.black_background button.tab,
.black_background .wpcf7 button[type="submit"].tab,
.black_background .wpcf7 input[type="submit"].tab {
    color: var(--white);
}
.black_background a.button.tab::after,
.black_background button.tab::after,
.black_background .wpcf7 button[type="submit"].tab::after,
.black_background .wpcf7 input[type="submit"].tab::after {
    background-color: var(--white);
}
/* tag button */
.black_background a.button.tag,
.black_background button.tag,
.black_background .wpcf7 button[type="submit"].tag,
.black_background .wpcf7 input[type="submit"].tag {
    background-color: var(--black);
    border-color: var(--mid-grey);
    color: var(--white);
}
.black_background a.button.tag.active,
.black_background button.tag.active,
.black_background .wpcf7 button[type="submit"].tag.active,
.black_background .wpcf7 input[type="submit"].tag.active {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}