:root {
    /* Font values */
    --primary-font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
    /* style */
    --font-style-normal: normal; 
    --font-style-italic: italic;
    --text-upper: uppercase;
    --text-lower: lowercase;
    --text-cap: capitalize;
    /* weight */
    --primary-font-weight-light: 300;
    --primary-font-weight-light-italic: 300;
    --primary-font-weight-regular: 400;
    --primary-font-weight-medium: 500;
    --primary-font-weight-medium-italic: 500;
    --primary-font-weight-bold: 700;
    /* size */
    --font-size-xxs: 0.625rem; /*10px*/
    --font-size-xs: 0.75rem; /*12px*/
    --font-size-sm: 0.875rem; /*14px*/
    --font-size-md: 1.0rem; /*16px*/
    --font-size-lg: 1.25rem; /*20px*/
    --font-size-xl: 1.5rem; /*24px*/
    --font-size-xxl: 2.0rem; /*32px*/
    /* line spacing */
    --line-height-xs: 1.0;
    --line-height-sm: 1.25;
    --line-height-md: 1.5; /* Baseline 1rem or 16px * unitless value 1.5 = 24px */
    --line-height-lg: 1.75;
    --line-height-xl: 2.0;

    /* Color values */ /* System colors */
    --color-brand-primary: #0e2740; /* Pick from corporate color palette - Navy */
    --color-brand-secondary: #c4e4f7; /* Pick from corporate color palette - Light blue */
    --color-brand-tertiary: #00a4a4; /* Pick from corporate color palette - Teal */
    --color-brand-quaternary: #ec8017; /* Pick from corporate color palette - Orange */

    /* New single color scale 100-0% high/low. 508 validated. Included single value -50 from Design System */
    --color-neutral-1000: #121212;
    --color-neutral-900: #292929;
    --color-neutral-800: #414141;
    --color-neutral-700: #585858;
    --color-neutral-600: #707070;
    --color-neutral-500: #888888;
    --color-neutral-400: #a0a0a0;
    --color-neutral-300: #b8b8b8;
    --color-neutral-200: #cfcfcf;
    --color-neutral-100: #e7e7e7;
    --color-neutral-50: #f9f9f9;
    --color-neutral-0: #ffffff;

    --color-blue-900: #0e2740;
    --color-blue-800: #0a3c6e;
    --color-blue-700: #015b98;
    --color-blue-600: #006fba;
    --color-blue-500: #0c7ac9;
    --color-blue-400: #0f99d6;
    --color-blue-300: #87ccea;
    --color-blue-200: #c4e4f7;
    --color-blue-100: #eef2f6;

    --color-green-600: #689e36;
    --color-green-500: #80c342;

    --color-purple-500: #87309f;

    --color-orange-500: #e7731f;
    --color-orange-400: #ec8017;

    --color-red-300: #b73026;
    --color-red-200: #ee3524;

    --color-yellow-400: #ffd600;
    --color-yellow-200: #fbe9ac;

    --color-feedback-error: var(--color-red-300);
    --color-feedback-warning: var(--color-orange-500);
    --color-feedback-success: var(--color-green-600);
    --color-feedback-info: var(--color-blue-200);
    --color-feedback-disabled: var(--color-neutral-400);

    /* Base radius values */
    --radius-none: 0;
    --radius-sm: 0.25rem;   /*4px*/
    --radius-md: 0.5rem;    /*8px*/
    --radius-lg: 1rem;      /*16px*/
    --radius-xl: 1.5rem;    /*24px*/
    --radius-xxl: 2.0rem;    /*32px*/
    --radius-pill: 624.9375rem; /* 9999px */
    --radius-circle: 50%;

    /* Spacing values*/
    --space-0: 0;
    --space-1: 0.25rem; /*4px*/
    --space-2: 0.5rem;  /*8px*/
    --space-3: 1rem;    /*16px*/
    --space-4: 1.5rem;  /*24px*/
    --space-5: 2rem;    /*32px*/
    --space-6: 3rem;    /*48px*/
    
    /* Uniform padding values */
    --padding-none: var(--space-0);
    --padding-xs: var(--space-1);
    --padding-sm: var(--space-2);
    --padding-md: var(--space-3);
    --padding-lg: var(--space-4);
    --padding-xl: var(--space-5);
    --padding-xxl: var(--space-6);

     /* Uniform margin values */
    --margin-none: var(--space-0);
    --margin-xs: var(--space-1);
    --margin-sm: var(--space-2);
    --margin-md: var(--space-3);
    --margin-lg: var(--space-4);
    --margin-xl: var(--space-5);
    --margin-xxl: var(--space-6);

    --page-surface: var(--color-neutral-50);
    --primary-text-color: var(--color-neutral-900);
    --primary-text-link: var(--color-blue-600);
    --primary-text-link-hover: var(--color-blue-800);
    --primary-text-link-visited: var(--color-purple-500);
    --secondary-text-color: var(--color-neutral-700);
}
body {
    font-family: var(--primary-font-family);
    font-weight: var(--primary-font-weight-regular);
    font-size: var(--font-size-md);
    line-height: var(--line-height-md);
    color: var(--primary-text-color);
    background: var(--page-surface);
}
a {
    color: var(--primary-text-link);
    text-decoration: none;
    /*white-space: nowrap;*/

    &:hover {
        color: var(--primary-text-link-hover);
        text-decoration: underline;
    }
    &:active {
        color: var(--primary-text-link-visited);
    }
}