/*colors*/
.color-black {
    color: var(--text-color-main);
}
.color-subdued {
    color: var(--text-color-subdued);
}
.color-theme {
    color: var(--theme-color);
}
.color-danger {
    color: var(--danger-color);
}
.color-white {
    color: var(--white);
}
.color-grey-light {
    color: var(--color-grey-light);
}
.color-grey-medium {
    color: var(--color-grey-medium);
}
.color-grey-dark {
    color: var(--color-grey-dark);
}
.color-blush {
    color: var(--whispering-blush);
}
.color-cotton-ball {
    color: var(--cotton-ball);
}
.color-cotton-cloud {
    color: var(--cotton-cloud);
}

.color-crimson {
    color: var(--crimson-blaze);
}
.color-crown {
    color: var(--crown-jewels);
}
.color-tanzine {
    color: var(--tanzine);
}
.color-magenta {
    color: var(--magenta-crayon);
}

.color-jade {
    color: var(--jade-green);
}
.color-green {
    color: var(--green-tea);
}
.color-sea {
    color: var(--sea-serpant);
}
.color-exotic {
    color: var(--exotic-intense);
}
.color-salmon {
    color: var(--buttery-salmon);
}
.color-chanterelles {
    color: var(--chanterelles);
}
.color-queen-blue {
    color: var(--queen-blue);
}
.color-iris {
    color: var(--ayame-iris);
}
.color-red-bud {
    color: var(--red-bud);
}
.color-charcoal-blue {
    color: var(--charcoal-blue);
}

.color-blue {
    color: var(--success-blue);
}
.color-blue-light {
    color: var(--success-blue-light);
}
.color-purple {
    color: var(--vibrant-purple);
}
.color-purple-light {
    color: var(--vibrant-purple-light);
}
.color-purple-lighter {
    color: var(--vibrant-purple-lighter);
}
.color-horizon-light {
    color: var(--horizon-blue-light);
}
.color-horizon-lighter {
    color: var(--horizon-blue-lighter);
}
.color-emerald-dark {
    color: var(--emerald-green-dark);
}
.color-emerald {
    color: var(--emerald-green);
}
.color-emerald-light {
    color: var(--emerald-green-light);
}
.color-pink-dark {
    color: var(--rose-pink-dark);
}
.color-pink {
    color: var(--rose-pink);
}
.color-pink-light {
    color: var(--rose-pink-light);
}
.color-yellow-dark {
    color: var(--mustard-yellow-dark);
}
.color-yellow {
    color: var(--mustard-yellow);
}
.color-yellow-light {
    color: var(--mustard-yellow-light);
}

.color-olive-green { /*for use in demo.css*/
    color: var(--olive-green);
}
/*for use in fleet deals*/
.color-plum-purple { /*for use in demo.css*/
    color: var(--plum-purple);
}
/*stepper vertical color*/
.color-yellow-bright {
    color: var(--yellow-color);
}

/*backgrounds*/
.bgc-black {
    background-color: var(--text-color-main);
}
.bgc-subdued {
    background-color: var(--text-color-subdued);
}
.bgc-theme {
    background-color: var(--theme-color);
}
.bgc-primary {
    background-color: var(--primary-color);
}
.bgc-secondary {
    background-color: var(--secondary-color);
}
.bgc-danger {
    background-color: var(--danger-color);
}
.bgc-body {
    background: var(--background-color-body); /*background property used so that gradient can be applied aswell*/
}

.bgc-white {
    background-color: var(--white);
}
.bgc-grey-light {
    background-color: var(--color-grey-light);
}
.bgc-grey-medium {
    background-color: var(--color-grey-medium);
}
.bgc-grey-dark {
    background-color: var(--color-grey-dark);
}
.bgc-blush {
    background-color: var(--whispering-blush);
}
.bgc-cotton-ball {
    background-color: var(--cotton-ball);
}
.bgc-cotton-cloud {
    background-color: var(--cotton-cloud);
}
.bgc-cotton-grey {
    background: rgba(138, 126, 126, 0.08); /*not in design system*/
}

.bgc-crimson {
    background-color: var(--crimson-blaze);
}
.bgc-crown {
    background-color: var(--crown-jewels);
}
.bgc-tanzine {
    background-color: var(--tanzine);
}
.bgc-magenta {
    background-color: var(--magenta-crayon);
}

.bgc-jade {
    background-color: var(--jade-green);
}
.bgc-green {
    background-color: var(--green-tea);
}
.bgc-sea {
    background-color: var(--sea-serpant);
}
.bgc-exotic {
    background-color: var(--exotic-intense);
}
.bgc-salmon {
    background-color: var(--buttery-salmon);
}
.bgc-chanterelles {
    background-color: var(--chanterelles);
}
.bgc-queen-blue {
    background-color: var(--queen-blue);
}
.bgc-iris {
    background-color: var(--ayame-iris);
}
.bgc-red-bud {
    background-color: var(--red-bud);
}
.bgc-charcoal-blue {
    background-color: var(--charcoal-blue);
}

.bgc-blue {
    background-color: var(--success-blue);
}
.bgc-blue-light {
    background-color: var(--success-blue-light);
}
.bgc-purple {
    background-color: var(--vibrant-purple);
}
.bgc-purple-light {
    background-color: var(--vibrant-purple-light);
}
.bgc-purple-lighter {
    background-color: var(--vibrant-purple-lighter);
}
.bgc-horizon-light {
    background-color: var(--horizon-blue-light);
}
.bgc-horizon-lighter {
    background-color: var(--horizon-blue-lighter);
}
.bgc-emerald-dark {
    background-color: var(--emerald-green-dark);
}
.bgc-emerald {
    background-color: var(--emerald-green);
}
.bgc-emerald-light {
    background-color: var(--emerald-green-light);
}
.bgc-pink-dark {
    background-color: var(--rose-pink-dark);
}
.bgc-pink {
    background-color: var(--rose-pink);
}
.bgc-pink-light {
    background-color: var(--rose-pink-light);
}
.bgc-yellow-dark {
    background-color: var(--mustard-yellow-dark);
}
.bgc-yellow {
    background-color: var(--mustard-yellow);
}
.bgc-yellow-light {
    background-color: var(--mustard-yellow-light);
}

/*for use in purple theme*/
.bgc-plum-purple {
    background-color: var(--plum-purple);
}

/*.bgc-olive-green {
    background-color: var(--olive-green);
}*/