:root {
	/* --- Colors --- */
	--color-primary-500: #3a1914; /* (btn) */
	--color-primary-400: #422d28; /* (btn hover) */
	--color-secondary-500: #e9e6d8; /* logo */
	--color-gray-600: #363531; /* (heading, text) */
	--color-gray-500: #504d44; /* (f.ex. footer bg) */
	--color-white-500: #ffffff;
	--color-white-700: #f0f0e8; /* (bg) */
	--color-success-500: #15a445;
	--color-red-500: #ef3b2c;
	--color-test-500: #e67e22;

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

	--spacing-section-lg: clamp(12.25rem, 11.053rem + 4vw, 14.25rem);
	--spacing-section-cta: clamp(6rem, 3.605rem + 8vw, 10rem);
	--spacing-section-md: clamp(5rem, 3.204rem + 6vw, 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-4xl: clamp(1.75rem, 0.702rem + 3.5vw, 3.5rem); /* 56px (min 28px) */
	--fz-2xl: clamp(1.625rem, 0.802rem + 2.75vw, 3rem); /* 48px (min 26px) */
	--fz-xl: clamp(1.125rem, 0.9rem + 0.75vw, 1.5rem); /* 24px (min 18px) */
	--fz-lg: clamp(1rem, 0.888rem + 0.38vw, 1.1875rem); /* 19px (min 16px) */
	--fz-sm: clamp(0.938rem, 0.863rem + 0.25vw, 1.063rem); /* 17px (min 15px) */
	--fz-xs: clamp(0.875rem, 0.838rem + 0.13vw, 0.9375rem); /* 15px (min 14px) */

	--fz-3xl: clamp(1.875rem, 0.902rem + 3.25vw, 3.5rem); /* 56px (min 30px) */
	--fz-md: clamp(1rem, 0.925rem + 0.25vw, 1.125rem); /* 18px (min 16px) */
	--fz-eyebrow-text: clamp(0.75rem, 0.6rem + 0.5vw, 1rem); /* 16px (min 14px) */

	/* --- Other --- */
	/* --border-radius-lg: 16px; */
	/* --border-radius-md: 12px; */
	/* --border-radius-sm: 6px; */
	/* --border-radius-xs: 4px; */
	/* --border-radius-button: 9999px; */
	/* --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;
	}
}