:root {
    /* Names and Values From Design System Figma */
    /*sans*/
    --ng-font-sans-regular: 'BrittiSans-Regular', "Arial", sans-serif;
    --ng-font-sans-medium: 'BrittiSans-Medium', "Arial", sans-serif;
    --ng-font-sans-semibold: 'BrittiSans-Semibold', "Arial", sans-serif;
    --ng-font-sans-regular-italic: 'BrittiSans-RegularItalic', "Arial", sans-serif;
    --ng-font-sans-medium-italic: 'BrittiSans-MediumItalic', "Arial", sans-serif;
    --ng-font-sans-semibold-italic: 'BrittiSans-SemiboldItalic', "Arial", sans-serif;
    /*serif*/
    --ng-font-serif-regular: 'Bitter-Regular', "Georgia", serif;
    --ng-font-serif-medium: 'Bitter-Medium', "Georgia", serif;
    /*Blue*/
    --ng-color-blue01: #3A6F8F;
    --ng-color-blue02: #31617E;
    --ng-color-blue03: #29536B;
    --ng-color-blue04: #1C435A;
    --ng-color-blue05: #1A3C54;
    --ng-color-blue06: #16314A;
    --ng-color-blue07: #112640;
    --ng-color-blue08: #0B1632;
    /*Beige*/
    --ng-color-beige01: #FBFBF9;
    --ng-color-beige02: #F7F7F2;
    --ng-color-beige03: #F4F3EC;
    --ng-color-beige04: #EEEDE2;
    --ng-color-beige05: #E6E5D5;
    --ng-color-beige06: #DFDDC8;
    --ng-color-beige07: #D6D3B8;
    --ng-color-beige08: #CCC9A8;
    /*Aqua*/
    --ng-color-aqua01: #E6FEFA;
    --ng-color-aqua02: #CCFFF6;
    --ng-color-aqua03: #93FFEB;
    --ng-color-aqua04: #00FFD2;
    --ng-color-aqua05: #00F0C5;
    --ng-color-aqua06: #00E0B9;
    /*Yellow*/
    --ng-color-yellow01: #FDFFC8;
    --ng-color-yellow02: #FBF79D;
    --ng-color-yellow03: #F9F373;
    --ng-color-yellow04: #F7EC25;
    --ng-color-yellow05: #EFE206;
    --ng-color-yellow06: #E0D406;
    /*Light Blue*/
    --ng-color-light-blue01: #F0F5FA;
    --ng-color-light-blue02: #E8F0F7;
    --ng-color-light-blue03: #E0EBF5;
    --ng-color-light-blue04: #D9E5F2;
    --ng-color-light-blue05: #C9DBED;
    --ng-color-light-blue06: #BAD1E8;
    /*Dark*/
    --ng-color-dark01: #575757;
    --ng-color-dark02: #474747;
    --ng-color-dark03: #3D3D3D;
    --ng-color-dark04: #333333;
    --ng-color-dark05: #292929;
    --ng-color-dark06: #1F1F1F;
    --ng-color-dark07: #1A1A1A;
    --ng-color-dark08: #0D0D0D;
    /*Light*/
    --ng-color-light01: #FAFAFA;
    --ng-color-light02: #F5F5F5;
    --ng-color-light03: #F0F0F0;
    --ng-color-light04: #EBEBEB;
    --ng-color-light05: #E6E6E6;
    --ng-color-light06: #E0E0E0;
    --ng-color-light07: #DBDBDB;
    --ng-color-light08: #D6D6D6;
    /*Size equivalents for px to rem. rem is used for better scaling and accessibility. Thinking in px is easier.*/
    --ng-size-4px: .25rem;
    --ng-size-8px: .5rem;
    --ng-size-10px: .625rem;
    --ng-size-12px: .75rem;
    --ng-size-14px: .875rem;
    --ng-size-16px: 1rem;
    --ng-size-18px: 1.125rem;
    --ng-size-20px: 1.25rem;
    --ng-size-24px: 1.5rem;
    --ng-size-28px: 1.75rem;
    --ng-size-32px: 2rem;
    --ng-size-35px: 2.1875rem;
    --ng-size-36px: 2.25rem;
    --ng-size-40px: 2.5rem;
    --ng-size-45px: 3rem;
    --ng-size-48px: 2.8125rem;
    --ng-size-52px: 3.25rem;
    --ng-size-60px: 3.75rem;
    --ng-size-64px: 4rem;
    --ng-size-72px: 4.5rem;
    --ng-size-120px: 7.5rem;
    /* Text colors. This should help change from light to dark when we're ready to work on that feature. */
    --ng-text-color-dark: var(--ng-color-blue08);
    --ng-text-color-white: #fff;
}