/* =====================================================
   VARIABLES
   ================================================== */

:root {

	/* =====================================================
	   FONT SIZES
	   ================================================== */

		--fs-900: clamp(1.625rem, 4.2vw, 4rem);
		--fs-800: clamp(1.625rem, 3.4vw, 3rem);
		--fs-700: clamp(1.625rem, 2.9vw, 2.125rem);
		--fs-600: clamp(1.375rem, 2.4vw, 1.75rem);
		--fs-500: clamp(1.25rem, 2.1vw, 1.5rem);
		--fs-400: clamp(1.125rem, 1.7vw, 1.25rem);
		--fs-300: clamp(1rem, 1.6vw, 1.375rem);
		--fs-200: clamp(1rem, 1.3vw, 1.125rem);
		--fs-100: clamp(0.75rem, 1.1vw, 0.875rem);
		--fs-50:  clamp(0.625rem, 1.1vw, 0.75rem);


	/* =====================================================
	   SEMANTIC TEXT SIZES
	   ================================================== */

		--heading-xxl: var(--fs-900);
		--heading-xl: var(--fs-800);
		--heading-lg: var(--fs-700);
		--heading-md: var(--fs-600);
		--heading-sm: var(--fs-500);
		--heading-xs: var(--fs-400);

		--text-lg: var(--fs-300);
		--text-md: var(--fs-200);
		--text-sm: var(--fs-100);
		--text-xs: var(--fs-50);


	/* =====================================================
	   LINE HEIGHTS
	   ================================================== */

		--lh-heading: 1.5;
		--lh-text-lg: 2;
		--lh-text-md: 1.5;

	
	/* =====================================================
	   LAYOUT
	   ================================================== */

		--gap: clamp(1.25rem, 3vw, 1.875rem);
	
	
}


/* =====================================================
   GENERAL
   ================================================== */

	/* Icons */

		.icon-wrapper,
		.button--icon {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: calc(var(--gap) / 2);
		}

		.icon-wrapper i {
			font-size: var(--text-md);
			font-style: normal;
			color: var(--color-text-inverse);
		}

		i.reverse {
			transform: rotate(90deg) !important;
		}

		i.icon {
			position: relative;
			display: inline-block;
			min-height: 1.125rem;
			min-width: 1.125rem;
			transition: var(--transition);
		}

		i.icon::before {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--color);
			-webkit-mask-image: var(--mask);
			mask-image: var(--mask);
			mask-repeat: no-repeat;
			mask-size: 100%;
		}

		i.icon--fill {
			width: 100%;
			height: 100%;
		}

		i.icon--xl {
			min-width: clamp(1.75rem, 4vw, 3rem);
			min-height: clamp(1.75rem, 4vw, 3rem);
		}

		i.icon--lg {
			min-width: 1.75rem;
			min-height: 1.75rem;
		}

		i.icon--md {
			min-width: 1.375rem;
			min-height: 1.375rem;
		}

		i.icon--sm {
			min-width: 0.875rem;
			min-height: 0.875rem;
		}

		.icon.phone::before {
			--mask:url("./assets/images/icons/ui/phone.svg") !important;
		}

		.icon.email::before {
			--mask:url("./assets/images/icons/ui/email.svg") !important;
		}

		.icon.email-alt::before {
			--mask:url("./assets/images/icons/ui/email-alt.svg") !important;
		}

		.icon.location::before {
			--mask:url("./assets/images/icons/ui/location.svg") !important;
		}

		.icon.time::before {
			--mask:url("./assets/images/icons/ui/time.svg") !important;
		}