:root {
    --base : 8;
    --ratio : 3;
    --col : 100vw / 12;

    /* Line height ****************************/
    --line-height-s-ul-px		: calc(var(--base) * 2);	/*  16 px */
    --line-height-m-ul-px		: calc(var(--base) * 3);	/*  24 px */
    --line-height-l-ul-px		: calc(var(--base) * 3.5);	/*  28 px */
    --line-height-xl-ul-px		: calc(var(--base) * 4.5);	/*  36 px */
    --line-height-2xl-ul-px 	: calc(var(--base) * 4.75);	/*  38 px*/
    --line-height-3xl-ul-px 	: calc(var(--base) * 7);	/*  56 px */
    --line-height-4xl-ul-px 	: calc(var(--base) * 13);	/* 104 px */
    --line-height-5xl-ul-px 	: calc(var(--base) * 21);	/* 168 px */

    /* Font size ****************************/
    --font-size-s-ul-px 		: 18; /* For accessibility reasons, 18px is the minimum font size */
    --font-size-m-ul-px 		: 18;
    --font-size-l-ul-px         : 22;
    --font-size-xl-ul-px 		: 28;
    --font-size-2xl-ul-px       : 36;
    --font-size-3xl-ul-px       : 48;

    /* Font stacks ****************************/
    --font-main 				: 'Lexend', sans-serif;
    --font-alt 					: 'Quicksand', 'Arial', sans-serif;
    --font-icon 				: 'FontAwesome';

    --font-weight-thin 			: 100;
    --font-weight-extra-light 	: 200;
    --font-weight-light 		: 300;
    --font-weight-regular 		: 400;
    --font-weight-medium 		: 500;
    --font-weight-semi-bold 	: 600;
    --font-weight-bold 			: 700;
    --font-weight-extra-bold 	: 800;
    --font-weight-black 		: 900;

    --font-style-regular 		: normal;
    --font-style-italic 		: italic;
    --font-style-oblic 			: oblique;
    
    /* Accessibility: For all font stacks with font sizes smaller than 22px, set line height as 1.5x the font size */
    /* Lexend bold 48 / 56 */
    --stack-heading-l 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-3xl) var(--font-main);
    
    /* Lexend semibold 36 / 38 */
    --stack-heading-m 			: var(--font-style-regular) var(--font-weight-semi-bold) var(--font-size-2xl)/var(--line-height-2xl) var(--font-main);
    
    /* Quicksand bold 22 / 28 */
    --stack-heading-s 			: var(--font-style-regular) var(--font-weight-bold) calc(var(--font-size-l) * var(--font-size-modifier))/calc(var(--line-height-l) * var(--font-size-modifier)) var(--font-alt);
    
    /* Lexend bold 18 / 27 */
    --stack-heading-xs 			: var(--font-style-regular) var(--font-weight-bold) calc(var(--font-size-m) * var(--font-size-modifier))/calc(1em * 1.25) var(--font-main);

    /* Lexend semibold 28 / 36 */
    --stack-content-l 			: var(--font-style-regular) var(--font-weight-semi-bold) var(--font-size-xl)/var(--line-height-xl) var(--font-main);
    
    /* Lexend regular 18 / 27 */
    --stack-content-m 			: var(--font-style-regular) var(--font-weight-regular) calc(var(--font-size-m) * var(--font-size-modifier))/calc(1em * 1.25) var(--font-main);

    /* Lexend black 18 / 27 */
    --stack-menu 				: var(--font-style-regular) var(--font-weight-black) calc(var(--font-size-m) * var(--font-size-modifier))/calc(1em * 1.25) var(--font-main);
    
    /* FontAwesome */
    --stack-icn 				: var(--font-style-regular) var(--font-weight-regular) 1em/1 var(--font-icon);

    /* Paddings and margins ****************************/
    --padding-xs    : calc(var(--base) * 1px);	/*  8 px */
    --padding-s		: calc(var(--base) * 1.5px);/*  12 px */
    --padding-m		: calc(var(--base) * 2px);	/*  16 px */
    --padding-l		: calc(var(--base) * 3px);	/*  24 px */
    --padding-xl	: calc(var(--base) * 5px);	/*  40 px */
    --padding-2xl	: calc(var(--base) * 7px);	/*  56 px */
    --padding-3xl	: calc(var(--base) * 12px);	/*  96 px */
    
    --margin-xs     : calc(var(--base) * 1px);	/*  8 px */
    --margin-s		: calc(var(--base) * 1.5px);/*  12 px */
    --margin-m		: calc(var(--base) * 2px);	/*  16 px */
    --margin-l		: calc(var(--base) * 3px);	/*  24 px */
    --margin-xl	    : calc(var(--base) * 5px);	/*  40 px */
    --margin-2xl	: calc(var(--base) * 7px);	/*  56 px */
    --margin-3xl	: calc(var(--base) * 12px);	/*  96 px */


    /* Offset ****************************/
    --slide						: 0;
    --offset					: 0px;

    /* Colors ****************************/
    --color-1: #014849;     /* #014849 */
    --color-2: #005F61;     /* #005F61 */
    --color-3: #9AB9AD;     /* #9AB9AD */
    --color-4: #E8F2F2;     /* #E8F2F2 */
    --color-5: #FDA943;     /* #FDA943 */
    --color-6: #FFC887;     /* #FFC887 */
    
    /* Basic colors and tones */
    --color-black: #000000;
    --color-charcoal: #4A4A4A;
    --color-light-gray: #FFFCFA;
    --color-white: #FFFFFF;
    
    /* Transitions ****************************/
    --transition-default: all .6s;
}