:root {
    /* monochrome */
    --clr-black: #000000;
    --clr-black50: rgba(0,0,0, 0.5);
    --clr-grey: #D9D9D9;
    --clr-grey75: #BFBFBF;
    --clr-grey90: #E5E5E5;
    --clr-grey95: #F2F2F2;
    --clr-white: #FFFFFF;

    /* green */
    --clr-darkgreen: #107E7D;
    --clr-darkgreen45: #1ACBC9;
    --clr-darkgreen20: #0B5B5A;
    --clr-green: #C6FF8A;
    --clr-green50: #E2FFC4;
    --clr-green60: #A2FF40;
    --clr-green70: #B4FF66;
    --clr-green75: #F1FFE2;

    /* blue */
    --clr-blue: #0900FF;
    --clr-blue2: #FAFFFF;

    /* red */
    --clr-red:   #FF0000;
    --clr-red80: #FF0000CC;
    --clr-red70: #FF4D4D;
    --clr-red50: #FF8080;
    --clr-red30: #FFB2B2;

    --clr-red-rgb: 255, 0, 0;
    --clr-red25: rgba( var(--clr-red-rgb), 0.25 )
}

.text-darkgreen {
    color: var(--clr-darkgreen);
}

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

.text-red{
    color: var(--clr-red);
}

.text-gray{
    color: var(--clr-grey75);
}
