:root{
    --dark-green: #496F5D;
    --light-green: #39A67A;
    --dark-purple: #49516F;
    --magenta: #6279B8;
    --black: #131112;
    --white: #F7F7FF;
    --gray: rgb(96, 101, 111);
    --blue: #279AF1;
    --error: #E10000;
    --success: #00ff04;
    --warning: #fac002;
}

.dark-green{
    color: var(--dark-green);
}

.light-green{
    color: var(--light-green);
}

.dark-purple{
    color: var(--dark-purple);
}

.magenta{
    color: var(--magenta);
}

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

.white{
    color: var(--white);
}

.gray{
    color: var(--gray);
}

.blue{
    color: var(--blue);
}

.error-color{
    color: var(--error);
}

.success-color{
    color: var(--success);
}

.warning-color{
    color: var(--warning);
}


/* -------------------------------------------------- */

.bg-dark-green{
    background-color: var(--dark-green);
}

.bg-light-green{
    background-color: var(--light-green);
}

.bg-dark-purple{
    background-color: var(--dark-purple);
}

.bg-magenta{
    background-color: var(--magenta);
}

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

.bg-white{
    background-color: var(--white);
}

.bg-gray{
    background-color: var(--gray);
}

.bg-blue{
    background-color: var(--blue);
}

.bg-error-color{
    background-color: var(--error);
}

.bg-success-color{
    background-color: var(--success);
}

.bg-warning-color{
    background-color: var(--warning);
}