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

@layer base {
	html {
		font-family: "Poppins", sans-serif;
		font-weight: 400;
		font-style: normal;
		@apply text-base text-black;
	}
	.h1 {
		@apply text-4xl font-semibold mb-4;
	}

	.h2 {
		@apply text-3xl font-semibold mb-3;
	}

	.h3 {
		@apply text-2xl font-medium mb-2;
	}

	.h4 {
		@apply text-xl font-medium mb-2;
	}

	.h5 {
		@apply text-lg font-medium mb-2;
	}

	.h6 {
		@apply text-base font-medium mb-2;
	}

	.p {
		@apply text-base mb-4;
	}
	.text-primary{@apply text-purple-600;}
	.bg-primary{@apply bg-purple-900;}
	.rounded-primary{@apply rounded-lg;}
}

@layer components {
	.btn {
		@apply cursor-pointer flex items-center justify-center gap-2;
		@apply rounded-primary px-6 h-12 text-white;
		@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
	}

	.btn-primary {
		@apply bg-primary text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
	}

	.input{
		@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
		@apply placeholder:text-gray-500;
		@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
	}

	.label{
		@apply block text-black text-sm;
	}
}
