:root {
	/* --- Colors --- */
	--color-primary-400: #12b704;
	--color-primary-500: #19a10d;
	/* --color-brand-400: #73c88f; */
	/* --color-brand-300: #d0edda; */
	--color-black-500: #000;
	--color-gray-500: #262626;
	--color-gray-400: #b2b2b2;
	--color-gray-300: #cdcece;
	--color-white-500: #ffffff;
	--color-white-600: #eff1f3;
	/* --color-bg-dark: #141414; */
	/* --color-heading: #0f0e0e; */
	/* --color-text: #383838; */
	/* --color-gray: #878787; */
	/* --color-border: #e9e9e9; */
	/* --color-star: #f6bb06; */
	/* --color-success: #f6bb06; */
	--color-red-500: #ef3b2c;

	/* --- Spacing (100%) --- */
	/* --spacing-5xl: 12.25rem; */
	/* --spacing-4xl: 10rem; */
	/* --spacing-3xl: 8rem; */
	/* Not using i guess (upper) */

	--spacing-section-lg: clamp(10rem, 8.653rem + 4.5vw, 12.25rem);
	--spacing-section-md: clamp(6rem, 4.803rem + 4vw, 8rem);
	--spacing-section-sm: clamp(4rem, 2.802rem + 4vw, 6rem);
	/* Custom added (upper) */
	--spacing-3xl: 8rem;
	--spacing-2xl: 6rem;
	--spacing-xl: 4rem;
	--spacing-lg: 3rem;
	--spacing-md: 2rem;
	--spacing-sm: 1.5rem;
	--spacing-xs: 1rem;
	--spacing-2xs: 0.75rem;
	--spacing-3xs: 0.5rem;
	--spacing-4xs: 0.25rem;
	--spacing-5xs: 0.125rem;

	/* --- Typography (Base) --- */
	--fz-4xl: clamp(2rem, 0.802rem + 4vw, 4rem); /* 64px (min 32px) */
	--fz-3xl: clamp(1.875rem, 0.902rem + 3.25vw, 3.5rem); /* 56px (min 30px) */
	--fz-2xl: clamp(1.75rem, 1.002rem + 2.5vw, 3rem); /* 48px (min 28px) */
	--fz-xl: clamp(1.375rem, 1.001rem + 1.25vw, 2rem); /* 32px (min 22px) */
	--fz-lg: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 20px (min 18px) */
	--fz-md: clamp(1rem, 0.925rem + 0.25vw, 1.125rem); /* 18px (min 16px) */
	--fz-sm: clamp(0.9375rem, 0.9rem + 0.13vw, 1rem); /* 16px (min 15px) */
	--fz-xs: clamp(0.875rem, 0.838rem + 0.13vw, 0.9375rem); /* 15px (min 14px) */
	/* --fz-lg: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem); 24px */
	--fz-table: clamp(0.75rem, 0.525rem + 0.75vw, 1.125rem); /* 18px (min 14px) */
	--fz-eyebrow-text: clamp(0.75rem, 0.6rem + 0.5vw, 1rem); /* 16px (min 14px) */

	/* --- Other --- */
	--border-radius-main: 16px;
	--border-radius-sm: 12px;
	--border-radius-xs: 8px;
}

/* ========================================= */
/* MAX-WIDTH: 1279px (Wrapper) */
/* ========================================= */

@media (max-width: 1279px) {
	:root {
		/* Spacing: ~93.75% */
		--spacing-5xs: 0.1172rem;
		--spacing-4xs: 0.2344rem;
		--spacing-3xs: 0.4688rem;
		--spacing-2xs: 0.7031rem;
		--spacing-xs: 0.9375rem;
		--spacing-sm: 1.4063rem;
		--spacing-md: 1.875rem;
		--spacing-lg: 2.8125rem;
		--spacing-xl: 3.75rem;
		--spacing-2xl: 5.625rem;
		--spacing-3xl: 7.5rem;
		--spacing-4xl: 9.375rem;
		--spacing-5xl: 11.4844rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 1119px (Tablet Landscape) */
/* ========================================= */

@media (max-width: 1119px) {
	:root {
		/* Spacing: 87.5% */
		--spacing-5xs: 0.1094rem;
		--spacing-4xs: 0.2188rem;
		--spacing-3xs: 0.4375rem;
		--spacing-2xs: 0.6563rem;
		--spacing-xs: 0.875rem;
		--spacing-sm: 1.3125rem;
		--spacing-md: 1.75rem;
		--spacing-lg: 2.625rem;
		--spacing-xl: 3.5rem;
		--spacing-2xl: 5.25rem;
		--spacing-3xl: 7rem;
		--spacing-4xl: 8.75rem;
		--spacing-5xl: 10.7188rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 1023px (Tablet Portrait) */
/* ========================================= */

@media (max-width: 1023px) {
	:root {
		/* Spacing: ~81.25% */
		--spacing-5xs: 0.1016rem;
		--spacing-4xs: 0.2031rem;
		--spacing-3xs: 0.4063rem;
		--spacing-2xs: 0.6094rem;
		--spacing-xs: 0.8125rem;
		--spacing-sm: 1.2188rem;
		--spacing-md: 1.625rem;
		--spacing-lg: 2.4375rem;
		--spacing-xl: 3.25rem;
		--spacing-2xl: 4.875rem;
		--spacing-3xl: 6.5rem;
		--spacing-4xl: 8.125rem;
		--spacing-5xl: 9.9531rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 767px (Phone Landscape) */
/* ========================================= */

@media (max-width: 767px) {
	:root {
		/* Spacing: 75% */
		--spacing-5xs: 0.0938rem;
		--spacing-4xs: 0.1875rem;
		--spacing-3xs: 0.375rem;
		--spacing-2xs: 0.5625rem;
		--spacing-xs: 0.75rem;
		--spacing-sm: 1.125rem;
		--spacing-md: 1.5rem;
		--spacing-lg: 2.25rem;
		--spacing-xl: 3rem;
		--spacing-2xl: 4.5rem;
		--spacing-3xl: 6rem;
		--spacing-4xl: 7.5rem;
		--spacing-5xl: 9.1875rem;
	}
}

/* ========================================= */
/* MAX-WIDTH: 479px (Phone Portrait) */
/* ========================================= */

@media (max-width: 479px) {
	:root {
		/* Spacing: 62.5% */
		--spacing-5xs: 0.0781rem;
		--spacing-4xs: 0.1563rem;
		--spacing-3xs: 0.3125rem;
		--spacing-2xs: 0.4688rem;
		--spacing-xs: 0.625rem;
		--spacing-sm: 0.9375rem;
		--spacing-md: 1.25rem;
		--spacing-lg: 1.875rem;
		--spacing-xl: 2.5rem;
		--spacing-2xl: 3.75rem;
		--spacing-3xl: 5rem;
		--spacing-4xl: 6.25rem;
		--spacing-5xl: 7.6563rem;
	}
}