@layer settings {

    :root {
        /* COLORS */
        /* NEUTRALS */
        --neutralcolor-white: #fff;
        --neutralcolor-light: #ddd;
        --neutralcolor-lightest: #fafafa;
        --neutralcolor-medium: #a2a2a2;
        --neutralcolor-dark: #3c3c3c;
        --neutralcolor-darkest: #161616;
        /* BRAND */
        --brandcolor-primary-light: #4094d9;
        --brandcolor-primary-medium: #0071ce;
        --brandcolor-primary-dark: #00386b;
        --brandcolor-primary-darkest: #00213F;
        --brandcolor-primary-lightest: #90ccff;
        --brandcolor-secondary-medium: #f65e0a;
        --brandcolor-secondary-light: #f88647;
        --brandcolor-secondary-lightest: #ffb790;
        --brandcolor-secondary-dark: #d43809;
        /* FEEDBACK COLORS */
        --feedbackcolor-error-medium: #ce0400;
        --feedbackcolor-error-light: #ec5b59;
        /* SPACING MARGIN AND PADDING */
        --spacing-token-4xs: 0.25rem;
        --spacing-token-3xs: 0.5rem;
        --spacing-token-2xs: 0.75rem;
        --spacing-token-xs: 1rem;
        --spacing-token-sm: 1.25rem;
        --spacing-token-md: 1.5rem;
        --spacing-token-lg: 2rem;
        --spacing-token-xl: 2.5rem;
        --spacing-token-2xl: 3rem;
        --spacing-token-3xl: 3.5rem;
        --spacing-token-4xl: 4rem;
        /* LAYOUT STRUCTURE */
        --spacing-layout-3xs: 0.5rem;
        --spacing-layout-2xs: 1rem;
        --spacing-layout-xs: 1.5rem;
        --spacing-layout-sm: 2rem;
        --spacing-layout-md: 2.5rem;
        --spacing-layout-lg: 3rem;
        --spacing-layout-xl: 3.5rem;
        --spacing-layout-2xl: 4rem;
        --spacing-layout-3xl: 5rem;
        --spacing-layout-4xl: 8rem;
        --spacing-layout-5xl: 12rem;
        --spacing-layout-6xl: 16rem;
        --spacing-layout-7xl: 20rem;
        /* FONT FAMILY */
        --font-family-01: "Open Sans", Arial, Verdana, sans-serif;
        /* FONT-SIZE */
        --font-size-3xs: 0.64rem;
        --font-size-2xs: 0.8rem;
        --font-size-xs: 1rem;
        --font-size-sm: 1.25rem;
        --font-size-md: 1.563rem;
        --font-size-lg: 1.953rem;
        --font-size-xl: 2.441rem;
        --font-size-2xl: 3.052rem;
        --font-size-3xl: 3.815rem;
        /* FONT WEIGHT */
        --font-weight-xs: 300;
        --font-weight-sm: 400;
        --font-weight-md: 600;
        --font-weight-lg: 700;
        --font-weight-xl: 800;
        /* LINE HEIGHT */
        --line-height-2xs: 0.8;
        --line-height-xs: 1;
        --line-height-sm: 1.2;
        --line-height-md: 1.5;
        --line-height-2md: 1.7;
        --line-height-lg: 2;
        /* BOX SHADOW */
        --dropshadow-sm: 0px 1px 2px 0px rgba(22, 22, 22, 0.34), 0px -1px 1px 0px rgba(22, 22, 22, 0.04);
        --dropshadow-md: -1px 3px 12px 0px rgba(22, 22, 22, 0.16), 1px 3px 12px 0px rgba(22, 22, 22, 0.16);
        --dropshadow-lg: -5px 7px 20px 0px rgba(22, 22, 22, 0.12), 5px 7px 20px 0px rgba(22, 22, 22, 0.12);
        --dropshadow-xl: -10px 20px 30px 0px rgba(22, 22, 22, 0.12),
        10px 20px 30px 0px rgba(22, 22, 22, 0.12);
        /* BORDER */
        --border-xs: 1px;
        --border-sm: 2px;
        --border-md: 4px;
        --border-lg: 6px;
        /* BORDER RADIUS */
        --border-radius-sm: 2px;
        --border-radius-md: 4px;
        --border-radius-lg: 6px;
        --border-radius-xl: 8px;
        /* OPACITY */
        --opacity-2: 0.2;
        --opacity-4: 0.4;
        --opacity-6: 0.6;
        --opacity-8: 0.8;
        /* GUTTER */
        --gutter: 1rem;
        /* UTILS */
        --full-width: 100%;
        --full-height: 100%;
        /* GRID */
        --grid-breakpoint-sm: 320px;
        --grid-breakpoint-md: 600px;
        --grid-breakpoint-lg: 1280px;
        --grid-breakpoint-xl: 1328px;
        --grid-breakpoint-2xl: 1920px;
        /* TRANSITIONS */
        --dur: 0.3s;
        /* ORDERING */
        --first: -1;
        --index1: 1;
        --index2: 2;
        --index9: 9;
        --last: 9999;
    }
}