:root {
    /* Legacy Color Variables (formerly on site.css) - KEEPING THESE BUT WOULD LIKE TO MIGRATE TO NEW COLORS */
    --color-primary: #A7252C !important;
    --white: #f9f9f9;
    --black: #222;
    --grey: #85888C;
    --brand-red-dark: #a83132;


    /* NEW COLOR VARIABLES */
    /* 
        The -500 values are the "default" brand colors.
        I added some additional colors but kept the brand red, black, and grey. 
        I modified the dark red as it was very close to the brand red. 
        I kept the previous brand colors above, in-tact, so that we can eventually migrate to the new colors.
        This isn't exactly how I'd do this if building it from the ground up, but that's not in the cards right now. 
    */

    /* Brand-BlueDark */
    --brand-bluedark-100: #dce3ec;
    --brand-bluedark-200: #b8c7d9;
    --brand-bluedark-300: #7594b8;
    --brand-bluedark-400: #406a91;
    --brand-bluedark-500: #1e3963;
    /* Default Brand Color is always -500 */
    --brand-bluedark-600: #1a3258;
    --brand-bluedark-700: #162b4c;
    --brand-bluedark-800: #12243f;
    --brand-bluedark-900: #0e1c33;

    /* Brand-BlueMedium */
    --brand-bluemedium-100: #d6f3f9;
    --brand-bluemedium-200: #ade6f3;
    --brand-bluemedium-300: #7fd6e8;
    --brand-bluemedium-400: #4dc3db;
    --brand-bluemedium-500: #0087a9;
    /* Default Brand Color is always -500 */
    --brand-bluemedium-600: #007998;
    --brand-bluemedium-700: #006882;
    --brand-bluemedium-800: #00576c;
    --brand-bluemedium-900: #004657;

    /* Brand-BlueGrey */
    --brand-bluegrey-100: #f8f9fa;
    --brand-bluegrey-200: #eef0f3;
    --brand-bluegrey-300: #e0e3e8;
    --brand-bluegrey-400: #cdd2db;
    --brand-bluegrey-500: #d2d6dd;
    /* Default Brand Color is always -500 */
    --brand-bluegrey-600: #a8adb4;
    --brand-bluegrey-700: #7e838a;
    --brand-bluegrey-800: #555a61;
    --brand-bluegrey-900: #2b2f33;

    /* Brand-RedPrimary */
    --brand-redprimary-100: #f9d9da;
    --brand-redprimary-200: #f3b3b5;
    --brand-redprimary-300: #e18284;
    --brand-redprimary-400: #ce5154;
    --brand-redprimary-500: #a7252c;
    /* Default Brand Color is always -500 */
    --brand-redprimary-600: #931f26;
    --brand-redprimary-700: #7e1a20;
    --brand-redprimary-800: #6a151b;
    --brand-redprimary-900: #560f15;

    /* Brand-RedDark */
    --brand-reddark-100: #f1dadb;
    --brand-reddark-200: #e3b4b7;
    --brand-reddark-300: #c38081;
    --brand-reddark-400: #9f494c;
    --brand-reddark-500: #6f2022;
    /* Default Brand Color is always -500 */
    --brand-reddark-600: #631d1f;
    --brand-reddark-700: #56191b;
    --brand-reddark-800: #4a1517;
    --brand-reddark-900: #3d1113;

    /* Brand-Accent (Green) */
    --brand-accent-100: #d4f6e7;
    --brand-accent-200: #a9edd0;
    --brand-accent-300: #7ee2b7;
    --brand-accent-400: #53d69c;
    --brand-accent-500: #24a66a;
    /* Default Brand Color is always -500 */
    --brand-accent-600: #20955e;
    --brand-accent-700: #1b8251;
    --brand-accent-800: #166f44;
    --brand-accent-900: #125d38;

    /* Brand-Black */
    --brand-black-100: #e5e5e5;
    --brand-black-200: #cccccc;
    --brand-black-300: #999999;
    --brand-black-400: #666666;
    --brand-black-500: #222222;
    /* Default Brand Color is always -500 */
    --brand-black-600: #1e1e1e;
    --brand-black-700: #1a1a1a;
    --brand-black-800: #151515;
    --brand-black-900: #111111;
    --brand-black-1000: #000000;

    /* Brand-Grey */
    --brand-grey-050: #ffffff;
    --brand-grey-100: #f2f2f3;
    --brand-grey-200: #dcdde0;
    --brand-grey-300: #c5c7cb;
    --brand-grey-400: #aeb1b6;
    --brand-grey-500: #85888c;
    /* Default Brand Color is always -500 */
    --brand-grey-600: #74777a;
    --brand-grey-700: #626467;
    --brand-grey-800: #515254;
    --brand-grey-900: #3f4042;
}

/* -------------------- Color Mapping -------------------- */

/* Surface Colors (background colors of UI elements) */

.surface-red-default {
    background-color: var(--brand-redprimary-500);
}

.surface-blue-default {
    background-color: var(--brand-bluemedium-500);
}

.red-header {
    color: var(--brand-redprimary-500);
}

.text-on-dark-050 {
    color: var(--brand-grey-100);
}

.text-on-dark-100 {
    color: var(--brand-grey-050);
}

.text-on-dark-200 {
    color: var(--brand-grey-200);
}

.text-on-dark-300 {
    color: var(--brand-grey-300);
}

.red-section {
    background-color: var(--brand-red-dark);
    color: var(--white);
}

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

.secondary-background-grey {
    background: #EDEDED;
}

.gradient-background-red {
    background: linear-gradient(90deg, rgba(66, 14, 17, 1) 0%, rgba(110, 27, 27, 1) 35%, rgba(172, 47, 48, 1) 100%);
}

.gradient-background-red-vertical {
    background: linear-gradient(0deg, rgba(66, 14, 17, 1) 0%, rgba(110, 27, 27, 1) 35%, rgba(172, 47, 48, 1) 100%);
}

.gradient-background-grey {
    background-image: linear-gradient(133deg, #fff 0, #e8e8e8 91%);
}