@charset "UTF-8";

/*
global-spacing	== tag + tag => spacing
gutter-gap		== structure / grid / columns => spacing
*/

/****************************/
/********** GLOBAL **********/
/****************************/

@media (min-width:0px) {
	body {
		--border-width:.0625rem;
		--border-radius: .25em;
	}
}

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

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

/****************************/
/********** COLORS **********/
/****************************/

/* in colors.css */

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

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

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

/** default **/
body {
	--viewport-height: 100vh;
}

/** touch device only **/
@media (pointer:coarse) {
	body {
		--viewport-height: 100svh;
	}
}

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

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

body {
	--content-maxwidth: 86rem; /* 20rem * 4 + 3 * 2rem */
	--line-height:.0625rem;
}

/********** SECTIONS **********/

@media (min-width:0px) {
	body {
		--section-padding: 1.5em;
	}
}
@media (min-width:1000px) {
	body {
		--section-padding: 2em;
	}
}
@media (min-width:1200px) {
	body {
		--section-padding: 4em;
	}
}

/********** GRID / SECTIONS **********/

@media (min-width: 0px) {
	body {
		--gutter-gap: 1rem;
	}
}
@media (min-width: 760px) {
	body {
		--gutter-gap: 2rem;
	}
}
@media (min-width: 1200px) {
	body {
		--gutter-gap: 3rem;
	}
}

/********** HEIGHTS **********/

@media (min-width: 0px) {
	body {
		--header-height:3.5rem;
		--footer-height:3.5rem;
	}
}
@media (min-width: 1000px) {
	body {
		--header-height:4rem;
		--footer-height:4rem;
	}
}