.hwc-color-primary-darker {
    color: var(--hwc-color-primary-darker);
}
.hwc-color-primary-dark {
    color: var(--hwc-color-primary-dark);
}
.hwc-color-primary {
    color: var(--hwc-color-primary);
}
.hwc-color-primary-light {
    color: var(--hwc-color-primary-light);
}
.hwc-color-primary-lighter {
    color: var(--hwc-color-primary-lighter);
}

.hwc-color-gray-lightest {
    color: var(--hwc-color-gray-normal);
}
.hwc-color-gray-lighter {
    color: var(--hwc-color-gray-light-fill);
}
.hwc-color-gray-light {
    color: var(--hwc-color-gray-normal);
}
.hwc-color-gray {
    color: var(--hwc-color-gray-normal);
}
.hwc-color-gray-dark {
    color: var(--hwc-color-gray-dark);
}
.hwc-color-gray-darker {
    color: var(--hwc-color-gray-dark);
}
.hwc-color-gray-darkest {
    color: var(--hwc-color-black);
}

.hwc-color-yellow {
    color: var(--hwc-color-alert-yellow);
}
.hwc-color-green {
    color: var(--hwc-color-alert-green);
}

.hwc-color-white {
    color: var(--hwc-color-white);
}
.hwc-color-black {
    color: var(--hwc-color-black);
}
.hwc-color-avocado {
    color: var(--hwc-color-alert-green);
}
.hwc-color-secondary {
    color: var(--hwc-color-alert-yellow);
}

/* Background colors */

.hwc-background-color-primary-darker {
    background-color: var(--hwc-color-primary-darker);
}
.hwc-background-color-primary-dark {
    background-color: var(--hwc-color-primary-dark);
}
.hwc-background-color-primary {
    background-color: var(--hwc-color-primary);
}
.hwc-background-color-primary-light {
    background-color: var(--hwc-color-primary-light);
}
.hwc-background-color-primary-lighter {
    background-color: var(--hwc-color-primary-lighter);
}

.hwc-background-color-gray-light {
    background-color: var(--hwc-color-gray-light-fill);
}
.hwc-background-color-gray {
    background-color: var(--hwc-color-gray-normal);
}
.hwc-background-color-gray-dark {
    background-color: var(--hwc-color-gray-dark);
}

.hwc-background-color-yellow {
    background-color: var(--hwc-color-alert-yellow);
}
.hwc-background-color-green {
    background-color: var(--hwc-color-alert-green);
}
.hwc-background-color-red {
    background-color: var(--hwc-color-alert-red);
}
.hwc-background-color-white {
    background-color: var(--hwc-color-white);
}
.hwc-background-color-black {
    background-color: var(--hwc-color-black);
}
.hwc-background-color-avocado {
    background-color: var(--hwc-color-alert-green);
}
.hwc-background-color-secondary {
    background-color: var(--hwc-color-alert-yellow);
}
.hwc-background-color-transparent {
    background-color: transparent;
}

/* Background colors with opacity*/

.hwc-background-color-opaque-primary {
    background-color: var(--hwc-color-opaque-primary);
}
.hwc-background-color-opaque-black {
    background-color: var(--hwc-color-opaque-black-20);
}

/* Responsive Background colors with opacity*/

.hwc-background-color-opaque-primary-desktop {
    @media (--large) {
        background-color: var(--hwc-color-opaque-primary);
    }
}
.hwc-background-color-opaque-primary-mobile {
    @media (--max-medium) {
        background-color: var(--hwc-color-opaque-primary);
    }
    @media (--high-res-mobile) {
        background-color: var(--hwc-color-opaque-primary);
    }
}
.hwc-background-color-opaque-black-desktop {
    @media (--large) {
        background-color: var(--hwc-color-opaque-black-20);
    }
}
.hwc-background-color-opaque-black-mobile {
    @media (--mobile) {
        background-color: var(--hwc-color-opaque-black-20);
    }
    @media (--high-res-mobile) {
        background-color: var(--hwc-color-opaque-black-20);
    }
}