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

    /* brand */
    --brand-blue: #0044FF;
    --sapphire: #25A8E0;
    --rock: #26252A;
    --whale: #3E3E4A;
    --fog: #7E7E96;

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

    /* mono / greys */
    --white: #FFFFFF;
    --light-grey: #F5F6FC;
    --grey: #D8D8D8;
    --dark-grey: #7F7F7F;
    --black: #1A1A1A;
}




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

.sapphire {
    color: var(--sapphire);
}
.sapphire_background {
    background-color: var(--sapphire);
}

.rock {
    color: var(--rock);
}
.rock_background {
    background-color: var(--rock);
}

.whale {
    color: var(--whale);
}
.whale_background {
    background-color: var(--whale);
}

.fog {
    color: var(--fog);
}
.fog_background {
    background-color: var(--fog);
}



/* 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);
}

.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 */

/* Default */
p {
    color: #7F7F7F;
}
.h1style,
.h2style,
.h3style,
.h4style {
    color: var(--black);
}

/* --- rock_background --- */
.rock_background h1,
.rock_background .h1style,
.rock_background h2,
.rock_background .h2style,
.rock_background h3,
.rock_background h3.style,
.rock_background h4,
.rock_background .h4style {
    color: var(--white);
}
.rock_background p,
.rock_background p.large {
    color: #B8B9CC;
}
.rock_background p.sub-heading,
.rock_background div.sub-heading p {
    color: var(--white);
}

/* --- whale_background --- */
.whale_background h1,
.whale_background .h1style,
.whale_background h2,
.whale_background .h2style,
.whale_background h3,
.whale_background h3.style,
.whale_background h4,
.whale_background .h4style {
    color: var(--white);
}
.whale_background p {
    color: var(--white);
}
.whale_background p.sub-heading,
.whale_background div.sub-heading p {
    color: var(--white);
}

/* --- sapphire_background --- */
.sapphire_background h1,
.sapphire_background .h1style,
.sapphire_background h2,
.sapphire_background .h2style,
.sapphire_background h3,
.sapphire_background h3.style,
.sapphire_background h4,
.sapphire_background .h4style {
    color: var(--white);
}
.sapphire_background p {
    color: var(--white);
}
.sapphire_background p.sub-heading,
.sapphire_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);
}