/********************************************************/
/*
/*      Variables CSS
/*
/********************************************************/


:root {

    --base : 8;
    --ratio : 3;

    /* 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) * 4);	/*  28 px */
    --line-height-xl-ul-px		: calc(var(--base) * 5);	/*  40 px */
    --line-height-2xl-ul-px 	: calc(var(--base) * 6);	/*  48 px*/
    --line-height-3xl-ul-px 	: calc(var(--base) * 11);	/*  88 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-xs-ul-px 		: 12;
    --font-size-s-ul-px 		: 16;
    --font-size-m-ul-px			: 18;
    --font-size-l-ul-px			: 20;
    --font-size-xl-ul-px 		: 28;
    --font-size-2xl-ul-px 		: 40;
    --font-size-3xl-ul-px 		: 70;
    --font-size-4xl-ul-px 		: 95;
    --font-size-5xl-ul-px		: 154;

    /* Font Stack */
    --font-main 				: 'Fira Sans Condensed', sans-serif;
    --font-title 				: 'Playfair Display', serif;
    --font-alt 					: 'Fira Sans' ,'Helvetica', '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;

    --stack-heading-l 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-2xl)/var(--line-height-2xl) var(--font-title);
    --stack-heading-m 			: var(--font-style-italic) var(--font-weight-bold) var(--font-size-xl)/var(--line-height-l) var(--font-title);
    --stack-heading-s 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-s)/var(--line-height-s) var(--font-title);

    --stack-content-l 			: var(--font-style-regular) var(--font-weight-bold) var(--font-size-l)/var(--line-height-m) var(--font-main);
    --stack-content-m 			: var(--font-style-regular) var(--font-weight-regular) var(--font-size-m)/var(--line-height-m) var(--font-main);
    --stack-content-s 			: var(--font-style-regular) var(--font-weight-regular) var(--font-size-s)/var(--line-height-m) var(--font-main);

    --stack-menu-l 				: var(--font-style-regular) var(--font-weight-bold) var(--font-size-l)/var(--line-height-m) var(--font-alt);
    --stack-menu-m 				: var(--font-style-regular) var(--font-weight-bold) var(--font-size-m)/var(--line-height-m) var(--font-alt);
    --stack-menu-s 				: var(--font-style-regular) var(--font-weight-bold) var(--font-size-s)/var(--line-height-s) var(--font-alt);

    --stack-icn 				: var(--font-style-regular) var(--font-weight-regular) 1em/1 var(--font-icon);

    /* Paddings and margins */

    --padding-s					: 10px;
    --padding-m					: 20px;
    --padding-l					: 25px;
    --padding-xl				: 50px;
    --padding-2xl				: 100px;
    --padding-3xl				: 150px;
    --padding-4xl				: 250px;

    --margin-s					: 10px;
    --margin-m					: 20px;
    --margin-l					: 25px;
    --margin-xl					: 50px;
    --margin-2xl				: 100px;
    --margin-3xl				: 150px;
    --margin-4xl				: 250px;

    /* Offset */

    --slide						: 0;
    --offset					: 0px;

    /* COLORS */

    /* Purple */
    --color-main-1 		: hsl(307, 89%, 33%);		/* #9E098D */

    --color-main-1-200 	: hsl(307, 89%, 15%);		/* #9E098D */
    --color-main-1-150 	: hsl(307, 89%, 25%);		/* #9E098D */
    --color-main-1-100	: hsl(307, 89%, 33%);		/* #9E098D */
    --color-main-1-75	: hsl(307, 89%, 44%);		/* #9E098D */
    --color-main-1-50	: hsl(307, 89%, 55%);		/* #9E098D */
    --color-main-1-25	: hsl(307, 89%, 66%);		/* #9E098D */

    --color-main-1-100a	: hsla(307, 89%, 33%, 1);	    /* #9E098D */
    --color-main-1-75a	: hsla(307, 89%, 33%, .75);	/* #9E098D */
    --color-main-1-50a	: hsla(307, 89%, 33%, .5);	/* #9E098D */
    --color-main-1-25a	: hsla(307, 89%, 33%, .25);	/* #9E098D */

    /* Basic colors and tones */
    --color-black			: #000000;
    --color-charcoal		: #4A4A4A;
    --color-gray			: #F4F4F4;
    --color-pale-gray		: #D8D8D8;
    --color-light-gray		: #EEEEEE;
    --color-light-gray-75a	: hsl(0, 0%, 93%, 0.75);

    --color-white			: #FFFFFF;

}