:root {
	/* --- Colors --- */
	--color-primary-600: #806761;
	--color-primary-500: #8c7c78;
	--color-primary-300: #c5b5b1;
	--color-secondary-600: #804d41;
	--color-secondary-500: #8e5a4d;
	--color-text-500: #474544;
	--color-light-500: #f6f4f3;
	--color-light-400: #f9f7f6;
	--color-beige-500: #eee8e5;
	--color-white-500: #ffffff;
	--color-red-500: #ea524d;

	/* --- 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);
	--spacing-section-xs: clamp(2rem, 1.079rem + 3.08vw, 4rem);
	/* 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 --- */
	--fz-display: clamp(2.625rem, 1.835rem + 2.64vw, 5rem); /* (min 42px) 80px */
	/* --fz-display: clamp(2.625rem, 1.531rem + 3.65vw, 5rem); for 1519, not looking good */
	--fz-h1: clamp(1.813rem, 1.438rem + 1.25vw, 2.625rem); /* (min 29px) 42px */
	--fz-h2: clamp(1.688rem, 1.428rem + 0.87vw, 2.25rem); /* (min 27px) 36px */
	--fz-h3: clamp(1.5rem, 1.327rem + 0.58vw, 1.875rem); /* (min 24px) 30px */
	--fz-h4: clamp(1.313rem, 1.226rem + 0.29vw, 1.5rem); /* (min 21px) 24px */
	--fz-h5: clamp(1.063rem, 0.976rem + 0.29vw, 1.25rem); /* (min 17px) 20px */
	--fz-l: clamp(1.063rem, 1.034rem + 0.1vw, 1.125rem); /* (min 17px) 18px */
	--fz-body: clamp(0.875rem, 0.789rem + 0.29vw, 1.063rem); /* (min 14px) 17px */
	--fz-subheading: clamp(
		0.813rem,
		0.726rem + 0.29vw,
		1rem
	); /* (min 13px) 16px */
	--fz-sm: clamp(0.813rem, 0.784rem + 0.1vw, 0.875rem); /* (min 13px) 14px */
	--fz-omnibus: clamp(
		0.625rem,
		0.596rem + 0.1vw,
		0.688rem
	); /* (min 10px) 11px */
	--fz-badge: clamp(0.563rem, 0.534rem + 0.1vw, 0.625rem); /* (min 10px) 11px */
	--fz-menu-item: clamp(
		0.875rem,
		0.817rem + 0.19vw,
		1rem
	); /* (min 14px) 16px */
	--fz-button: clamp(
		0.875rem,
		0.789rem + 0.29vw,
		1.063rem
	); /* (min 14px) 17px */

	/* --- Other --- */
	--border-radius-table: 12px;
	--border-radius-main: 6px;
	/* --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;
	}
}