:root {
    --color-black: #000;
    --color-gray: #ABB8C3;
    --color-white: #fff;
    --color-pale-pink: #f78da7;
    --color-nps-red: #d60b17;
    --color-vivid-red: #cf2e2e;
    --color-vivid-orange: #ff6900;
    --color-vivid-amber: #fcb900;
    --color-light-green: #7bdcb5;
    --color-vivid-green: #00d084;
    --color-pale-cyan: #8ed1fc;
    --color-vivid-cyan: #0693e3;
    --color-vivid-purple: #9b51e0;
}

.has-black-color {
    color: var(--color-black);
}
.has-gray-color {
    color: var(--color-gray);
}
.has-white-color {
    color: var(--color-white);
}
.has-pale-pink-color {
    color: var(--color-pale-pink);
}
.has-nps-red-color {
    color: var(--color-nps-red);
}
.has-vivid-orange-color {
    color: var(--color-vivid-orange);
}
.has-vivid-amber-color {
    color: var(--color-vivid-amber);
}
.has-light-green-color {
    color: var(--color-light-green);
}
.has-vivid-green-color {
    color: var(--color-vivid-green);
}
.has-pale-cyan-color {
    color: var(--color-pale-cyan);
}
.has-vivid-cyan-color {
    color: var(--color-vivid-cyan);
}
.has-vivid-purple-color {
    color: var(--color-vivid-purple);
}



.has-black-background-color {
    background-color: var(--color-black);
}
.has-gray-background-color {
    background-color: var(--color-gray);
}
.has-white-background-color {
    background-color: var(--color-white);
}
.has-pale-pink-background-color {
    background-color: var(--color-pale-pink);
}
.has-nps-red-background-color {
    background-color: var(--color-nps-red);
}
.has-vivid-orange-background-color {
    background-color: var(--color-vivid-orange);
}
.has-vivid-amber-background-color {
    background-color: var(--color-vivid-amber);
}
.has-light-green-background-color {
    background-color: var(--color-light-green);
}
.has-vivid-green-background-color {
    background-color: var(--color-vivid-green);
}
.has-pale-cyan-background-color {
    background-color: var(--color-pale-cyan);
}
.has-vivid-cyan-background-color {
    background-color: var(--color-vivid-cyan);
}
.has-vivid-purple-background-color {
    background-color: var(--color-vivid-purple);
}