:root {
	--color-rich-black: #231e1c;
	--color-warm-white: #f7f3e4;
	--color-sunset-pink: #ff8894;
	--color-lavender: #bea8dd;
	--color-raspberry: #a31347;
	--color-strawberry-red: #ce1d1d;
	--color-lemon-yellow: #ffe164;
	--color-peachy-peach: #f2b5a2;
	--color-buzzy-blue: #a9d4ea;
	--color-garnish-green: #606029;
	--color-sandy-tan: #a08055;

	--font-display: "fatfrank", "Arial Black", sans-serif;
	--font-condensed: "vinyl", "Arial Narrow", sans-serif;
	--font-script: "the-youngest", "Brush Script MT", cursive;
	--font-body: "Libre Franklin", "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-sans: "Figtree", "Libre Franklin", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--container-width: 75rem;
	--container-gutter: clamp(1rem, 4vw, 3rem);
	--header-height: 6.375rem;

	--space-xs: clamp(0.5rem, 0.7vw, 0.75rem);
	--space-sm: clamp(0.75rem, 1vw, 1rem);
	--space-md: clamp(1.25rem, 2vw, 2rem);
	--space-lg: clamp(2rem, 4vw, 4rem);
	--space-xl: clamp(4rem, 7vw, 7rem);

	--radius-sm: 0.5rem;
	--radius-md: 0.75rem;
	--radius-lg: 1.25rem;
	--border: 0.0625rem solid var(--color-rich-black);
	--shadow-elevated: 0 1rem 3rem rgb(35 30 28 / 16%);
	--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 48rem) {
	:root {
		--header-height: 4.75rem;
	}
}