@import 'tailwindcss';
@plugin '@tailwindcss/forms';

@theme {
	--font-mono: 'Berkeley Mono', monospace;
}

@layer base {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p {
		@apply mt-[2em] mb-[1em];
	}
}

@layer components {
	.form-label {
		@apply mb-2 block;
	}

	.form-error {
		@apply text-sm text-red-400;
	}

	.form-button {
		@apply bg-black px-4 py-2 font-sans text-white hover:bg-stone-800 dark:bg-white dark:text-black dark:hover:bg-stone-200;
	}

	.form-success {
		@apply bg-green-50 p-3 text-green-800 dark:bg-green-900 dark:text-green-200;
	}

	.text-heading {
		@apply text-xl font-normal;
	}

	.text-title {
		@apply text-4xl font-normal;
	}

	.text-subtitle {
		@apply text-lg text-stone-600 dark:text-stone-400;
	}

	.text-muted {
		@apply text-stone-600 dark:text-stone-400;
	}

	.text-footer {
		@apply text-stone-500 dark:text-stone-400;
	}

	.border-muted {
		@apply border-stone-200 dark:border-stone-700;
	}

	.link-hover {
		@apply hover:text-black dark:hover:text-white;
	}
}

input,
select,
textarea,
.form-input {
	@apply w-full rounded-sm border border-stone-300 bg-white p-2 font-sans placeholder:text-stone-400 dark:border-stone-600 dark:bg-stone-800 dark:text-white dark:placeholder:text-stone-500;
}
