@import "tailwindcss";

@theme {
	--color-brand-50: #fff8f2;
	--color-brand-100: #feeadc;
	--color-brand-200: #fbd1b7;
	--color-brand-300: #f4ad82;
	--color-brand-400: #e97c4c;
	--color-brand-500: #dc5a2d;
	--color-brand-600: #d05024;
	--color-brand-700: #a83b20;
	--color-brand-800: #87321f;
	--color-brand-900: #6e2b1e;
	--color-brand-950: #3c140d;
	--color-ivory: #f5f2e7;
	--color-ink: #242424;
}

@layer components {
	.staff-form-label {
		@apply block text-sm font-semibold text-gray-700;
	}

	.staff-form-control {
		@apply mt-2 block h-12 w-full rounded-lg border border-gray-300 bg-white px-4 text-base text-ink shadow-sm outline-none transition placeholder:text-gray-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-100;
	}

	.staff-form-textarea {
		@apply mt-2 block min-h-28 w-full resize-y rounded-lg border border-gray-300 bg-white px-4 py-3 text-base text-ink shadow-sm outline-none transition placeholder:text-gray-400 focus:border-brand-500 focus:ring-4 focus:ring-brand-100;
	}

	.staff-form-checkbox {
		@apply h-5 w-5 rounded border-gray-300 text-brand-600 focus:ring-brand-500;
	}

	.staff-form-fieldset {
		@apply rounded-lg border border-gray-200 bg-gray-50/60 p-5;
	}

	.staff-form-submit {
		@apply inline-flex min-h-12 cursor-pointer items-center justify-center rounded-lg bg-brand-600 px-5 text-base font-semibold text-white shadow-sm transition hover:bg-brand-700 focus:outline-none focus:ring-4 focus:ring-brand-200;
	}

	.staff-form-cancel {
		@apply inline-flex min-h-12 items-center justify-center rounded-lg bg-gray-100 px-5 text-base font-semibold text-gray-700 transition hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200;
	}
}