:root {

	/***************************************
			Typography & spacings
	****************************************/

	--fontsize-m-min: 18;
	--fontsize-m-max: 26;
	--fontsize-min-scale: 1.2;
	--fontsize-max-scale: 1.25;

	--space-m-min: 20;
	--space-m-max: 24;

	--fluid-min-width: 320;
	--fluid-max-width: 1100;
	--screen-width: 100vw;
	
	--body-width: 100vw;

}
@media screen and (min-width:1100px) {
	:root {
		--screen-width: calc(var(--fluid-max-width) * 1px);
	}
}
@media screen and (min-width:1920px) {
	:root {
		--body-width: 1920px;
	}
}
@media screen and (max-width:320px) {
	:root {
		--screen-width: calc(var(--fluid-min-width) * 1px);
	}
}
:root {

	--fluid-ratio: calc( (var(--screen-width) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));

	--fontsize-xs: calc( var(--fontsize-m) * 0.6 );
	--fontsize-s: calc( var(--fontsize-m) * 0.8 );

	--fontsize-m: calc( ((var(--fontsize-m-min) / 16) * 1rem) + (var(--fontsize-m-max) - var(--fontsize-m-min)) * var(--fluid-ratio) );

	--fontsize-l-min: calc(var(--fontsize-m-min) * var(--fontsize-min-scale));
	--fontsize-l-max: calc(var(--fontsize-m-max) * var(--fontsize-max-scale));
	--fontsize-l: calc( ((var(--fontsize-l-min) / 16) * 1rem) + (var(--fontsize-l-max) - var(--fontsize-l-min)) * var(--fluid-ratio) );

	--fontsize-xl-min: calc(var(--fontsize-l-min) * var(--fontsize-min-scale));
	--fontsize-xl-max: calc(var(--fontsize-l-max) * var(--fontsize-max-scale));
	--fontsize-xl: calc( ((var(--fontsize-xl-min) / 16) * 1rem) + (var(--fontsize-xl-max) - var(--fontsize-xl-min)) * var(--fluid-ratio) );

	--fontsize-2xl-min: calc(var(--fontsize-xl-min) * var(--fontsize-min-scale));
	--fontsize-2xl-max: calc(var(--fontsize-xl-max) * var(--fontsize-max-scale));
	--fontsize-2xl: calc( ((var(--fontsize-2xl-min) / 16) * 1rem) + (var(--fontsize-2xl-max) - var(--fontsize-2xl-min)) * var(--fluid-ratio) );

	--fontsize-3xl-min: calc(var(--fontsize-2xl-min) * var(--fontsize-min-scale));
	--fontsize-3xl-max: calc(var(--fontsize-2xl-max) * var(--fontsize-max-scale));
	--fontsize-3xl: calc( ((var(--fontsize-3xl-min) / 16) * 1rem) + (var(--fontsize-3xl-max) - var(--fontsize-3xl-min)) * var(--fluid-ratio) );

	--fontsize-4xl-min: calc(var(--fontsize-3xl-min) * var(--fontsize-min-scale));
	--fontsize-4xl-max: calc(var(--fontsize-3xl-max) * var(--fontsize-max-scale));
	--fontsize-4xl: calc( ((var(--fontsize-4xl-min) / 16) * 1rem) + (var(--fontsize-4xl-max) - var(--fontsize-4xl-min)) * var(--fluid-ratio) );

	--fontsize-5xl-min: calc(var(--fontsize-4xl-min) * var(--fontsize-min-scale));
	--fontsize-5xl-max: calc(var(--fontsize-4xl-max) * var(--fontsize-max-scale));
	--fontsize-5xl: calc( ((var(--fontsize-5xl-min) / 16) * 1rem) + (var(--fontsize-5xl-max) - var(--fontsize-5xl-min)) * var(--fluid-ratio) );

	--space-2xs: calc(var(--space-m) * 0.25);
	--space-xs: calc(var(--space-m) * 0.5);
	--space-s: calc(var(--space-m) * 0.75);
	--space-m: calc(((var(--space-m-min) / 16) * 1rem) + (var(--space-m-max) - var(--space-m-min)) * var(--fluid-ratio));
	--space-l: calc(var(--space-m) * 1.5);
	--space-xl: calc(var(--space-m) * 2);
	--space-2xl: calc(var(--space-m) * 3);

	--space-stretch-min: calc(var(--space-m-min) * 0.75);
	--space-stretch-max: calc(var(--space-m-max) * 1.5);
	--space-stretch: calc(((var(--space-stretch-min) / 16) * 1rem) + (var(--space-stretch-max) - var(--space-stretch-min)) * var(--fluid-ratio));

	--space-edge-min: 10;
	--space-edge-max: 80;
	--space-edge: calc(((var(--space-edge-min) / 16) * 1rem) + (var(--space-edge-max) - var(--space-edge-min)) * var(--fluid-ratio));

	--fontweight-bold: 700;
	--fontweight-semibold: 600;
    --fontweight-button: 400;


/***************************************
				Colors
****************************************/

	--primary-h: 12;
	--primary-s: 71%;
	--primary-l: 48%;
	--primary-hsl: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
	--primary-base-hsl: hsl(var(--primary-h) var(--primary-s) 95%);
	--primary-contrast-hsl: hsl(var(--primary-h) var(--primary-s) 32%);

	--secondary-h: -10;
	--secondary-s: 13%;
	--secondary-l: 49%;
	--secondary-hsl: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l));
	--secondary-base-hsl: hsl(var(--secondary-h) var(--secondary-s) 91%);
	--secondary-contrast-hsl: hsl(var(--secondary-h) var(--secondary-s) 38%);

	--accent-h: 44;
	--accent-s: 82%;
	--accent-l: 51%;
	--accent-hsl: hsl(var(--accent-h) var(--accent-s) var(--accent-l));


/***************************************
				Settings
****************************************/

	--alternate-font: Rubik, sans-serif;
	--tagline-font: var(--alternate-font);
	--button-font: var(--alternate-font);

	--frame-radius: 10px;
	--button-radius: 9999px;
	--input-radius: 3px;
	
	--frame-shadow: 0 5px 20px -10px rgba(0,0,0,0.2);
	--image-shadow: var(--frame-shadow);

	--global-duration: 0.2s;

	--site-logo-height: 44px;
	--header-content-height: var(--site-logo-height);

    --input-padding: 0.4em 0.8em;
    --badge-padding: 0.25em 0.7em;
	
	--decoration-thickness: calc( 0.2 * var(--space-xs) );
	
	--grid-gap: var(--space-xs);

}