@font-face {
	font-family: "Oaks";
	src: url("../fonts/Oaks-Light.otf") format("opentype");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

:root {

	--itg-color-earth: #9c7661;
	--itg-color-mahogany: #502030;
	--itg-color-sand: #fffdd2;


	--itg-color-lime: #c7ee00;
	--itg-color-rainforest: #38724c;
	--itg-color-clay: #fe5d40;


	--itg-color-background: var(--itg-color-sand);
	--itg-color-background-dark: var(--itg-color-mahogany);
	--itg-color-text: var(--itg-color-mahogany);
	--itg-color-text-on-dark: var(--itg-color-sand);
	--itg-color-text-muted-on-dark: var(--itg-color-sand);
	--itg-color-accent: var(--itg-color-clay);
	--itg-color-highlight: var(--itg-color-lime);
	--itg-color-link: var(--itg-color-clay);


	--itg-color-input-background: rgba(255, 255, 255, 0.6);
	--itg-color-input-border: rgba(156, 118, 97, 0.24);


	--itg-font-heading: "Oaks", "Times New Roman", serif;
	--itg-font-body: "DM Sans", system-ui, -apple-system, sans-serif;


	--itg-font-weight-light: 300;
	--itg-font-weight-regular: 400;
	--itg-font-weight-medium: 500;


	--itg-font-size-h1: 6.25rem;
	--itg-line-height-h1: 5.625rem;
	--itg-letter-spacing-h1: 0;


	--itg-font-size-h2: 3.75rem;
	--itg-line-height-h2: 3.75rem;
	--itg-letter-spacing-h2: 0;


	--itg-font-size-h3: 2.5rem;
	--itg-line-height-h3: 2.5rem;
	--itg-letter-spacing-h3: 0;


	--itg-font-size-h4: 1.875rem;
	--itg-line-height-h4: 2.25rem;
	--itg-letter-spacing-h4: 0;


	--itg-font-size-statement: 1.5rem;
	--itg-line-height-statement: 2rem;
	--itg-letter-spacing-statement: 0;


	--itg-font-size-body-lg: 1.125rem;
	--itg-line-height-body-lg: 1.5rem;
	--itg-letter-spacing-body-lg: 0;


	--itg-font-size-body: 1rem;
	--itg-line-height-body: 1.375rem;
	--itg-letter-spacing-body: 0;


	--itg-font-size-menu: 1.25rem;
	--itg-line-height-menu: 1;
	--itg-letter-spacing-menu: 0;


	--itg-font-size-display: 7.5rem;
	--itg-line-height-display: 1;

	--itg-font-size-stat: 10rem;
	--itg-line-height-stat: 8.125rem;

	--itg-font-size-tag: 1rem;
	--itg-line-height-tag: 1;

	--itg-font-size-button: 1.25rem;
	--itg-line-height-button: 1;


	--itg-space-2xs: 0.25rem;
	--itg-space-xs: 0.5rem;
	--itg-space-sm: 0.625rem;
	--itg-space-md: 0.75rem;
	--itg-space-lg: 1.25rem;
	--itg-space-xl: 1.75rem;
	--itg-space-2xl: 2.5rem;
	--itg-space-3xl: 5rem;
	--itg-space-4xl: 7.5rem;


	--itg-layout-max: 120rem;
	--itg-layout-gutter: var(--itg-space-3xl);
	--itg-layout-content: 110rem;


	--itg-layout-col-narrow: 25.625rem;
	--itg-layout-col-medium: 35rem;
	--itg-layout-col-wide: 53.75rem;


	--itg-radius-xs: 0.5rem;
	--itg-radius-sm: 0.625rem;
	--itg-radius-md: 1rem;
	--itg-radius-lg: 1.25rem;
	--itg-radius-xl: 1.5625rem;
	--itg-radius-2xl: 3.125rem;
	--itg-radius-3xl: 4.6875rem;
	--itg-radius-pill: 6.25rem;


	--itg-border-width: 2px;
	--itg-border-color-accent: var(--itg-color-clay);
	--itg-border-color-light: var(--itg-color-sand);
	--itg-border-color-input: var(--itg-color-input-border);


	--itg-button-padding-x: var(--itg-space-lg);
	--itg-button-padding-y: 0.625rem;
	--itg-button-gap: var(--itg-space-md);
	--itg-button-radius: var(--itg-radius-md);
	--itg-button-border-width: var(--itg-border-width);
	--itg-button-height: 2.6875rem;

	--itg-input-height: 3rem;
	--itg-input-height-textarea: 7.5rem;
	--itg-input-radius: var(--itg-radius-sm);
	--itg-input-padding-x: var(--itg-space-lg);

	--itg-tag-padding-x: var(--itg-space-lg);
	--itg-tag-padding-y: 0.625rem;
	--itg-tag-radius: var(--itg-radius-md);

	--itg-icon-button-size: 3rem;
	--itg-icon-button-radius: var(--itg-radius-lg);

	--itg-logo-height: 4.875rem;
	--itg-logo-width: 7.5rem;

	--itg-carousel-track-height: 0.75rem;


	--itg-header-height: calc(var(--itg-logo-height) + var(--itg-space-lg));
	--itg-header-nav-gap: 3rem;
	--itg-header-utility-gap: 2rem;


	--itg-breakpoint-mobile-max: 767px;
	--itg-breakpoint-desktop-min: 768px;
}