:root {
    --black-color: #231F20;
    --white-color: #F2F2F2;
    --grey-color: #777777;
    --red-color: #fc001b;
    --lightred-color: #f2bdae;
    --orange-color: #f1a937;
    --darkpurple-color: #433078;
}

.has-black-color { color: var(--black-color); }
.has-black-background-color { background-color: var(--black-color); }
.has-white-color { color: var(--white-color); }
.has-white-background-color { background-color: var(--white-color); }
.has-grey-color { color: var(--grey-color); }
.has-grey-background-color { background-color: var(--grey-color); }
.has-red-color { color: var(--red-color); }
.has-red-background-color { background-color: var(--red-color); }

.has-lightred-color { color: var(--lightred-color); }
.has-lightred-background-color { background-color: var(--lightred-color); }
.has-orange-color { color: var(--orange-color); }
.has-orange-background-color { background-color: var(--orange-color); }
.has-darkpurple-color { color: var(--darkpurple-color); }
.has-darkpurple-background-color { background-color: var(--darkpurple-color); }