@charset "UTF-8";

/***************************/
/********** FONTS **********/
/***************************/

@media (min-width:0px) {
	body {
		--body-font-size:1rem;
		--global-spacing: 1rem;
	}
}
@media (min-width:760px) {
	body {
		--global-spacing: 2rem;
	}
}

/***************************/
/********** FORMS **********/
/***************************/

@media (min-width:0px) {
	body {
		--input-min-height:3.5rem;
	}
}
@media (min-width:760px) {
	body {
		--input-min-height:3.75rem;
	}
}

/*******************************/
/********** STRUCTURE **********/
/*******************************/

/*
--viewport-height

--gutter-gap
--content-maxwidth

--logo-height == ratio 12/6
--logo-line-height == logo underline height
--logo-line-width == logo underline width
--logo-circle == logo dot diameter

--header-height
--footer-height
--contextual-height
*/

/********** VIEWPORT 100VH FIX **********/

/** default **/

body {
	--viewport-height: 100vh;
}

/** touch device only **/

@media (pointer:coarse) {
	body {
		--viewport-height: 90vh; /* js rectified */
	}
}

/********** CUSTOM **********/

@media (min-width: 0px) {
	body {
		/** global spacing **/
		--gutter-gap: 1rem;
		--content-maxwidth: 86rem; /* 20rem * 4 + 3 * 2rem */

		/** logo based **/
		--logo-height: 3rem;
		--logo-line-height: 0.09375rem;
		--logo-line-width: 0.4375rem;
		--logo-circle: 0.4375rem;
		
		/** heights **/
		--header-height:calc(var(--body-font-size) * 5); /* cf. --navbar-height */
		--footer-height: calc(var(--body-font-size) * 3);
		--contextual-height: calc(var(--body-font-size) * 3);
	}
}
@media (min-width: 760px) {
	body {
		/** global spacing **/
		--gutter-gap: 2rem;

		/** logo based **/
		--logo-height: 4rem;
		--logo-line-height: 0.1075rem;
		--logo-line-width: 0.59375rem;
		--logo-circle: 0.59375rem;

		/** heights **/
		/* navbar + logo + primary with padding + padding BASED on body font size ! */
		--header-height: calc(var(--logo-height) + var(--body-font-size) * 6.5);
	}
}
@media (min-width: 1000px) {
	body {
		/** logo based **/
		--logo-height: 5rem;
		--logo-line-height: 0.125rem;
		--logo-line-width: 0.75rem;
		--logo-circle: 0.75rem;
	}
}
@media (min-width: 1200px) {
	body {
		/** global spacing **/
		--gutter-gap: 3rem;
	}
}