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

    /* brand */
    --brand-blue: #0044FF;
    --yellow: #F5FF99;

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

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #F5F5F5;
    --grey: #D8D8D8;
    --mid-grey-1: #A4A4A4;
    --mid-grey-2: #818181;
    --dark-grey: #464646;
    --black: #1A1A1A;
}




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

.yellow {
    color: var(--yellow);
}
.yellow_background {
    background-color: var(--yellow);
}



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



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

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

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

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

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

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

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



/* Color Overrides */
/* --- onyx_background --- */
.whatever_background h1,
.whatever_background h2,
.whatever_background h3,
.whatever_background h4,
.whatever_background h5 {
    color: var(--white);
}
.whatever_background p {
    color: var(--white);
}
.whatever_background p.sub-heading,
.whatever_background div.sub-heading p {
    color: var(--white);
}



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