:root {
	--cream: #F5EFE6;
	--surface: #FCF9F3;
	--white: #FFFFFF;
	--ink: #2A2521;
	--ink-soft: #6B635B;
	--gold: #B8975A;
	--gold-deep: #8A6E38;
	--gold-soft: #EFE6D2;
	--lavender: #E7E0EC;
	--lavender-deep: #6E6280;
	--rose: #EAD9D6;
	--rose-deep: #6F4541;
	--line: rgba(42, 37, 33, 0.12);
	--ink-veil: rgba(42, 37, 33, 0.4);
	--ink-veil-soft: rgba(42, 37, 33, 0.18);
	--cream-muted: rgba(245, 239, 230, 0.64);
	--cream-faint: rgba(245, 239, 230, 0.4);
	--cream-line: rgba(245, 239, 230, 0.14);
	--surface-glass: rgba(252, 249, 243, 0.94);
	--surface-glass-blur: rgba(252, 249, 243, 0.72);

	--r-lg: 28px;
	--r-md: 20px;
	--r-sm: 12px;
	--r-hero: 40px;
	--r-pill: 999px;
	--ink-glass: rgba(42, 37, 33, 0.32);

	--font-display: "Tenor Sans", "Century Gothic", sans-serif;
	--font-ui: "Manrope", system-ui, sans-serif;

	--gutter: 20px;
	--header-offset: 12px;
	--header-bar-height: 80px;
}

@media (min-width: 768px) {
	:root {
		--header-offset: 20px;
	}
}

@media (min-width: 1024px) {
	:root {
		--header-bar-height: 88px;
	}
}

@media (min-width: 1440px) {
	:root {
		--gutter: 40px;
	}
}

@media (min-width: 1920px) {
	:root {
		--gutter: 60px;
	}
}