@charset "UTF-8";

/*
fonts
colors

=> in config/theme/theme.css
*/

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

/****************************/
/********** FAMILY **********/
/****************************/

body {
	--font-family: sans-serif;
	--font-weight-normal: 300;
	--font-weight-medium: 600;
	--font-weight-bold: 900;
}

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

/** mobile **/
@media (max-width:760px) {
	body {
		--body-font-size:.875rem;
		--global-spacing: 1rem;
	}
}
/** desktop **/
@media (min-width:760px) {
	body {
		--body-font-size:1rem;
		--global-spacing: 2rem;
	}
}

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

body {
	/* standard */
	--dark-rgb: 0, 0, 0;
	--light-rgb: 245, 245, 240;
	--bright-rgb: 255, 255, 255;
	--accent-rgb: 205, 205, 200;

	--dark-color: rgb(var(--dark-rgb));
	--light-color: rgb(var(--light-rgb));
	--bright-color: rgb(var(--bright-rgb));
	--accent-color: rgb(var(--accent-rgb));
	--bright-badge-color: rgb(var(--bright-badge-rgb));
	
	--back-footer-color: rgb(var(--back-footer-rgb));
	--txt-footer-color: rgb(var(--txt-footer-rgb));

	/* variations */
	--lighter-brightness: 1.2;
	--darker-brightness: .8;
}

/**************************/
/**************************/
/********** GRID **********/
/**************************/
/**************************/

/*
--item-width
--grid-gap
*/

@media (min-width: 0px) {
	body {
		--item-width: 100%;
	}
}
@media (min-width: 760px) {
	body {
		--item-width: calc(100% / 2);
	}
}
@media (min-width: 1200px) {
	body {
		--item-width: calc(100% / 3);
	}
}

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

/**

--gutter-gap
--content-maxwidth

--line-height == logo underline height

--header-height
--footer-height
--contextual-height

**/

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

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

		/** line **/
		--line-height: 0.0625rem;
		
		/** heights **/
		--navbar-height: calc(var(--body-font-size) * .75 * 5);
		--footer-height: calc(var(--body-font-size) * 3);
	}
}
@media (min-width: 760px) {
	body {
		/** global spacing **/
		--gutter-gap: 2rem;
	}
}
@media (min-width: 1200px) {
	body {
		/** global spacing **/
		--gutter-gap: 3rem;
	}
}