@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--color-primary: 250 237 206;
		--color-primary-btn: 50 110 94;
		/* --color-primary: 230 221 196; */
		--color-secondary: 248 199 148;
		/* --color-secondary: 206 212 212; */
		--color-accent: 134 70 60;
		/* --color-accent: 24 29 49; */
	}
	html,
	body {
		@apply bg-primary text-[#312b2b];
	}
	a,
	button {
		@apply transition-all duration-300 ease-in-out;
	}
}

@layer components {
	.embla__button {
		@apply flex items-center justify-center w-7 h-7 xl:w-9 xl:h-9 rounded-full border border-transparent xl:border-primaryBtn hover:bg-primaryBtn focus-visible:outline-primaryBtn;
	}
}