:root {

    /* Spacing size */
    --upm-spacing-01-xxxs: 2px;
    --upm-spacing-02-xxs: 4px;
    --upm-spacing-03-xs: 8px;
    --upm-spacing-04-s: 12px;
    --upm-spacing-05-m: 16px;
    --upm-spacing-06-l: 24px;
    --upm-spacing-07-xl: 32px;
    --upm-spacing-08-xxl: 48px;
    --upm-spacing-09-xxxl: 64px;

    /*Font size*/
    /* TODO: figure out actual styles */
    --upm-base-font-size: 16px;
    --upm-font-size-xs: 0.75rem;
    --upm-font-size-s: 0.875rem;
    --upm-font-size-m: 1rem;
    --upm-font-size-l: 1.125rem;
    --upm-font-size-xl: 1.375rem;
    --upm-font-size-xxl: 1.5rem;
    --upm-font-size-h0: 3rem;
    --upm-font-size-h1: 2.125rem;
    --upm-font-size-h2: 1.375rem;
    --upm-font-size-h3: 1.375rem;
    --upm-font-size-h4: 1.25rem;
    --upm-font-size-h5: 1.125rem;
    --upm-font-size-h6: 1rem;
    --upm-line-height-xs: 1;
    --upm-line-height-s: 1.25;
    --upm-line-height-m: 1.5;
    --upm-line-height-l: 1.75;

    /* Font weight */
    --upm-font-weight-heavy: 700;
    --upm-font-weight-demi: 600;
    --upm-font-weight-medium: 500;
    --upm-font-weight-book: 400;


    /*Colors*/
    /*NOTE: the colors go from the most saturated to the most washed out*/

    /* Font color */
    --upm-color-font-black: #202020;
    --upm-color-font-very-dark-gray: #333333;
    --upm-color-font-dark-gray: #444444;
    --upm-color-font-warm-gray: #666666;
    --upm-color-font-gray: #888888;
    --upm-color-font-contrast: #FFFFFF;
    --upm-color-font-link: #007AA8;

    /*Primary*/
    --upm-color-primary-1: #008342;
    --upm-color-primary-2: #9BCB5D;
    --upm-color-primary-3: #BCDC93;
    --upm-color-primary-4: #DEEEC9;
    --upm-color-primary-5: #F1F8E8;

    /*Grayscale*/
    --upm-color-black: #202020;
    --upm-color-white: #ffffff;
    --upm-color-gray-1: #666666;
    --upm-color-gray-2: #444444;
    --upm-color-border: #E1E1DF;
    --upm-color-border-contrast: #BDBDBD;
    --upm-color-table-light: rgba(217, 216, 216, 0.2);
    --upm-color-table-header: #F0EFEF;
    --upm-color-table-highlight: #E1E1DF;

    /*Background*/
    --upm-color-background-light: #F8F8F8;
    --upm-color-background-colored: #6B BB5E;
    --upm-color-background-dark: #3D3D3D;

    /*Secondary*/
    --upm-color-orange-1: #EF7726;
    --upm-color-orange-2: #F3995C;
    --upm-color-orange-3: #F7BB92;
    --upm-color-orange-4: #FBDDC9;
    --upm-color-orange-5: #FDF1E9;

    /*Brown*/
    --upm-color-brown-1: #998573;
    --upm-color-brown-2: #B3A496;
    --upm-color-brown-3: #CCC2B9;
    --upm-color-brown-4: #E5E0DC;
    --upm-color-brown-5: #F5F3F1;
}