@import "html.css";
@import "type.css";
@import "utilities.css";
@import "layout.css";
@import "components.css";
@import "pages.css";

/* site wide variables */
:root {

	--transition-base: 250ms ease;
	--transition-movement: 200ms linear;
	--transition-fade: 300ms ease;
	--transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
	--leading-standard: 1.5;

	--body-width: 112.5rem;

	--container-width: clamp(17.5rem, 90%, 73.75rem);
	--container-width--wide: clamp(17.5rem, 90%, 86.25rem);
	--container-width--narrow: clamp(17.5rem, 90%, 48.75rem);

	--dark: #0F0F0F;
	--light: #FFF;
	--primary: #1682E0;
	--secondary: #C33;
	
	--font-family: system-ui, sans-serif;
	--font-weight: 400;

	--base-font-size: 16px;

	--heading-large: clamp(2.25rem, 10vw, 3rem); /* 3rem = 48px */
	--heading-medium: clamp(1.5rem, 6.5vw, 2.25rem); /* 2.25rem = 36px */
	--heading-small: clamp(1.125rem, 5vw, 1.5rem); /* 1.5rem = 24px */ 
	--heading-x-small: clamp(0.875rem, 3.75vw, 1.125rem); /* 1.125rem = 18px */

	--heading-line-height: 1.2;

	--paragraph-large: clamp(1.25rem, 6.25vw, 2rem); /* 2rem = 32px */
	--paragraph: clamp(1.125rem, 5vw, 1.5rem); /* 1.5rem = 24px */ 
	--paragraph-medium: clamp(1.125rem, 5vw, 1.5rem); /* 1.5rem = 24px */ 
	--paragraph-small: clamp(0.875rem, 3.75vw, 1.125rem); /* 1.125rem = 18px */
	--paragraph-x-small: clamp(0.75rem, 3.25vw, 0.875rem); /* 0.875rem = 14px */
	--paragraph-xx-small: clamp(0.625rem, 3vw, 0.75rem); /* 0.625rem = 10px, 0.75rem = 12px */

	--paragraph-line-height: 1.6;

	--spacing: clamp(1.5rem, 2.5vw, 2.5rem);
	--spacing--medium: calc(var(--spacing) * 2);
	--spacing--large: calc(var(--spacing) * 3);
	--spacing--x-large: calc(var(--spacing) * 4);

}