:root {
    /* --- colors --- */

    /* refined palette */
    --brand-blue: #0B6DFF;

    --lime: #B7EB55;
    --indigo: #174463;
    --tiffany: #A4DACE;
    --spruce: #057188;
    --chocolate: #51161E;
    --valentine: #F993D0;
    --razzle: #FF47C9;
    --rose: #F0267A;

    /* icon palette */
    --chocolate-dark: #6B5054;
    --chocolate-light: #EEE8E9;
    --razzle-dark: #F964BD;
    --razzle-light: #FEE9F5;
    --lime-dark: #80A43B;
    --lime-light: #F0FBDD;
    --spruce-dark: #367A88;
    --spruce-light: #EDF7F5;

    /* functional */
    --danger-red: #FF0000;
    --form-selects: #0088FF;

    /* mono / greys */
    --white: #FFFFFF;
    --light-blue: #F5F6fA;
    --light-grey: #F5F5F5;
    --mid-grey: #D8D8D8;
    --dark-grey: #7F7F7F;
    --black: #040404;
}




/* Brand */
.brand-blue {
    color: var(--brand-blue);
}
.brand-blue_background {
    background-color: var(--brand-blue);
}



/* Functional */
.danger-red {
    color: var(--danger-red);
}
.danger-red_background {
    background-color: var(--danger-red);
}



/* Utility Classes */
.white {
    color: var(--white);
}
.white_background {
    background-color: var(--white);
}

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

.light-grey {
    color: var(--light-grey);
}
.light-grey_background {
    background-color: var(--light-grey);
}

.mid-grey {
    color: var(--mid-grey);
}
.mid-grey_background {
    background-color: var(--mid-grey);
}

.dark-grey {
    color: var(--dark-grey);
}
.dark-grey_background {
    background-color: var(--dark-grey);
}

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








.lime {
    color: var(--lime);
}
.lime_background {
    background-color: var(--lime);
}

.indigo {
    color: var(--indigo);
}
.indigo_background {
    background-color: var(--indigo);
}

.tiffany {
    color: var(--tiffany);
}
.tiffany_background {
    background-color: var(--tiffany);
}

.spruce {
    color: var(--spruce);
}
.spruce_background {
    background-color: var(--spruce);
}

.chocolate {
    color: var(--chocolate);
}
.chocolate_background {
    background-color: var(--chocolate);
}

.valentine {
    color: var(--valentine);
}
.valentine_background {
    background-color: var(--valentine);
}

.razzle {
    color: var(--razzle);
}
.razzle_background {
    background-color: var(--razzle);
}

.rose {
    color: var(--rose);
}
.rose_background {
    background-color: var(--rose);
}

/* Icon Palette */
.chocolate-dark {
    color: var(--chocolate-dark);
}
.chocolate-dark_background {
    background-color: var(--chocolate-dark);
}

.chocolate-light {
    color: var(--chocolate-light);
}
.chocolate-light_background {
    background-color: var(--chocolate-light);
}

.razzle-dark {
    color: var(--razzle-dark);
}
.razzle-dark_background {
    background-color: var(--razzle-dark);
}

.razzle-light {
    color: var(--razzle-light);
}
.razzle-light_background {
    background-color: var(--razzle-light);
}

.lime-dark {
    color: var(--lime-dark);
}
.lime-dark_background {
    background-color: var(--lime-dark);
}

.lime-light {
    color: var(--lime-light);
}
.lime-light_background {
    background-color: var(--lime-light);
}

.spruce-dark {
    color: var(--spruce-dark);
}
.spruce-dark_background {
    background-color: var(--spruce-dark);
}

.spruce-light {
    color: var(--spruce-light);
}
.spruce-light_background {
    background-color: var(--spruce-light);
}










/* Color Overrides */
/* --- black_background --- */
.black_background h1,
.black_background h2,
.black_background h3,
.black_background h4,
.black_background h5,
.black_background h6,
.black_background .h1style,
.black_background .h2style,
.black_background .h3style,
.black_background .h4style,
.black_background .h5style,
.black_background .h6style {
    color: var(--white);
}
.black_background p {
    color: var(--white);
}
.black_background p.sub-heading,
.black_background div.sub-heading p {
    color: var(--white);
}



/* Text Color Selection */
::selection {
    background: var(--black); /* WebKit/Blink Browsers */
    color: var(--white);
}
::-moz-selection {
    background: var(--black); /* Gecko Browsers */
    color: var(--white);
}