:root {

    --base : 8;
    --ratio : 3;
    --col : 100vw / 12;
    
    /* Font weight **************************/
    --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 size ****************************/
    --font-size-xs-ul-px 		: 14;
    --font-size-s-ul-px 		: 18;
    --font-size-m-ul-px         : 24;
    --font-size-l-ul-px 		: 28;
    --font-size-xl-ul-px        : 42;
    --font-size-2xl-ul-px       : 56;
    --font-size-3xl-ul-px 		: 76;
    --font-size-4xl-ul-px       : 150;
    
    /* Line height ****************************/
    --line-height-xs-ul-px		: calc(var(--base) * 2.25);	/*  18 px */
    --line-height-s-ul-px		: calc(var(--base) * 3);	/*  24 px */
    --line-height-m-ul-px		: calc(var(--base) * 3.25);	/*  26 px */
    --line-height-l-ul-px		: calc(var(--base) * 4);	/*  32 px */
    --line-height-xl-ul-px 	    : calc(var(--base) * 5.25);	/*  42 px */
    --line-height-2xl-ul-px 	: calc(var(--base) * 7.5);	/*  60 px */
    --line-height-3xl-ul-px		: calc(var(--base) * 9.5);	/*  76 px */
    --line-height-4xl-ul-px 	: calc(var(--base) * 14.5);	/* 116 px */

    /* Font stacks ****************************/
    --font-title 			    : 'GraphCondensed', sans-serif;
    --font-title-alt            : 'din-condensed', sans-serif;
    --font-main 				: 'Lato', sans-serif;
    --font-alt 					: '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;
    
    /* GraphCondensed bold 150 / 116 */
    --stack-heading-3xl 		: var(--font-style-regular) var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-4xl) var(--font-title);
    
    /* GraphCondensed bold 76 / 76 */
    --stack-heading-2xl 		: var(--font-style-regular) var(--font-weight-bold) var(--font-size-3xl)/var(--line-height-3xl) var(--font-title);
    
    /* GraphCondensed bold 56 / 60 */
    --stack-heading-xl 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-2xl) var(--font-title);
    
    /* GraphCondensed bold 42 / 42 */
    --stack-heading-l 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-xl)/var(--line-height-xl) var(--font-title);
    
    /* Din bold 28 / 32 */
    --stack-heading-m 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-l)/var(--line-height-l) var(--font-title-alt);
    
    /* Lato regular 24 / 26 */
    --stack-heading-s 			: var(--font-style-regular) var(--font-weight-regular) var(--font-size-m)/var(--line-height-m) var(--font-main);
    
    /* Din black 18 / 24 */
    --stack-heading-xs 			: var(--font-style-regular) var(--font-weight-black) var(--font-size-s)/var(--line-height-s) var(--font-title);
    
    /* Lato regular italic 28 / 32 */
    --stack-content-l			: var(--font-style-italic) var(--font-weight-regular) var(--font-size-l)/var(--line-height-l) var(--font-main);
    
    /* Lato regular 18 / 24 */
    --stack-content-m			: var(--font-style-regular) var(--font-weight-regular) var(--font-size-s)/var(--line-height-s) var(--font-main);
    
    /* Lato bold 18 / 24 */
    --stack-content-m-alt		: var(--font-style-regular) var(--font-weight-bold) var(--font-size-s)/var(--line-height-s) var(--font-main);
    
    /* Lato regular 14 / 18 */
    --stack-content-s 			: var(--font-style-regular) var(--font-weight-regular) var(--font-size-xs)/var(--line-height-xs) var(--font-main);
    
    /* Din black 14 / 18 */
    --stack-content-s-alt 		: var(--font-style-regular) var(--font-weight-black) var(--font-size-xs)/var(--line-height-xs) var(--font-title-alt);
    
    /* Din medium 28 / 32 */
    --stack-menu			    : var(--font-style-regular) var(--font-weight-medium) var(--font-size-l)/var(--line-height-l) var(--font-title-alt);
    
    /* FontAwesome */
    --stack-icn 				: var(--font-style-regular) var(--font-weight-regular) 1em/1 var(--font-icon);

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

    /* Colors ****************************/
    --color-1                   : #FFB93C;
    --color-2                   : #FFA300;
    --color-3                   : #C76C00;
    --color-4                   : #EC8602;
    
    /* Basic colors and tones */
    --color-black               : #000000;
    --color-black-rich          : #212429;
    --color-gray                : #495057;
    --color-light-gray          : #F1EFE5;
    --color-white               : #FFFFFF;
    
    /* Transitions ****************************/
    --transition-default: all .6s;
}