:root{
	/* Color */
	--color-primary:			72 16% 32%;		/* HEX: #585D44 */	/* HSL: 72°, 16%, 32% */	/* Greyish brown */
	--color-secondary:			28 8% 44%; 		/* HEX: #7A7067 */	/* HSL: 28°, 8%, 44%  */	/* Brownish grey */
	--color-greyish:			48 6% 65%;		/* HEX: #AAA8A0 */ 	/* HSL: 48°, 6%, 65%  */	/* Greyish */
	--color-light-peach:		45 11% 85%; 	/* HEX: #DEDCD6 */	/* HSL: 45°, 11%, 85% */	/* Light peach */
	--color-white:				0 0% 96%; 		/* HEX: #F4F4F4 */	/* HSL: 0°, 0%, 96%   */	/* White */
	
	--color-text:				72 16% 32%;		/* HEX: #585D44 */	/* HSL: 72°, 16%, 32% */	/* Greyish brown */
	--color-background:			0 0% 96%; 		/* HEX: #F4F4F4 */	/* HSL: 0°, 0%, 96%   */	/* White */

	--color-border:				#000;
	--color-border-input:		#000;

	/* Typo */
	--ff-serif:					"Austin-Italic", serif;
	--ff-sans:					"Pangram-Regular", sans-serif;
	
	--fs-900:					4.5rem;		/* 72px */
	--fs-800:					4rem;		/* 64px */
	--fs-700:					2.875rem;	/* 46px */
	--fs-600:					2.625rem;	/* 42px */
	--fs-500:					1.5rem;		/* 24px */
	--fs-400:					1rem;		/* 16px */

	/* Gap */
	--gap-700:					4rem;		/* 64px */
	--gap-600:					3rem;		/* 48px */
	--gap-500:	 				2rem;		/* 32px */
	--gap-400: 					1rem; 		/* 16px */
	--gap-300: 					0.5rem;		/*  8px */

	--gap-flow: 				1rem;		/* 16px */
	--gap-form: 				0.75rem;	/* 12px */


	/* Paddings */
	--padding-pageX: 			min(8.75rem, 6vw );	/* 140px */
	--padding-sectionY:			4rem;				/*  64px */
	--padding-sectionX:			2rem;				/*  32px */
	
	--padding-button:			20px 70px;
	--padding-button-xs:		20px 25px;
	--padding-input: 			15px 0px;

	/* Height */
	--height-header:			140px;
	--height-header--sticky:	110px;

	/* Transitions */
	--trans: 					all 250ms ease-in-out;
	--trans-300:				all 150ms ease-in-out;
}

@media(max-width: 1024px){
	:root{
		/* Typo * 0.80 */
		--fs-900:					2rem;		/* 3.750rem; 72px > 60px */
		--fs-800:					1.75rem;	/* 3.125rem; 64px > 50px */
		--fs-700:					2rem;		/* 46px > 32px */
		--fs-600:					1.75rem;	/* 42px > 28px */
		--fs-500:					1.5rem;		/* 24px */
		--fs-400:					1rem;		/* 16px */

		/* Paddings */
		--padding-pageX: 			2.25rem;	/* 36px */
		--padding-sectionY:			3rem;		/* 48px */
		--padding-sectionX:			2.25rem;	/* 36px */

	}
}

@media(max-width: 767px){
	:root{
		/* Paddings */
		--padding-pageX: 			1.25rem;	/* 20px */
		--padding-sectionY:			3.00rem;	/* 48px */
		--padding-sectionX:			1.25rem;	/* 20px */

		/* Height */
		--height-header:			70px;
		--height-header--sticky:	70px;
	}
}

/*************************************************************************************************************
***** TYPOGRAPHY **************************************************************************************************
**************************************************************************************************************/
@font-face {
	font-family: Austin-Italic;
	src: local(Austin-Italic),
	  url(../fonts/Austin-Italic.ttf) format("truetype");
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: Pangram-Regular;
	src: local(Pangram-Regular),
	  url(../fonts/Pangram-Regular.ttf) format("truetype");
	font-style: normal;
	font-stretch: normal;
}