@import 'tailwindcss';

@plugin 'flowbite/plugin';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
	--color-primary-50: #fff5f2;
	--color-primary-100: #fff1ee;
	--color-primary-200: #ffe4de;
	--color-primary-300: #ffd5cc;
	--color-primary-400: #ffbcad;
	--color-primary-500: #fe795d;
	--color-primary-600: #ef562f;
	--color-primary-700: #eb4f27;
	--color-primary-800: #cc4522;
	--color-primary-900: #a5371b;

	--color-secondary-50: #f0f9ff;
	--color-secondary-100: #e0f2fe;
	--color-secondary-200: #bae6fd;
	--color-secondary-300: #7dd3fc;
	--color-secondary-400: #38bdf8;
	--color-secondary-500: #0ea5e9;
	--color-secondary-600: #0284c7;
	--color-secondary-700: #0369a1;
	--color-secondary-800: #075985;
	--color-secondary-900: #0c4a6e;
}

@source "../node_modules/flowbite-svelte/dist";
@source "../node_modules/flowbite-svelte-icons/dist";

@layer base {
	/* disable chrome cancel button */
	input[type='search']::-webkit-search-cancel-button {
		display: none;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 700;
		line-height: 1.2;
	}

	h1 {
		@apply text-4xl md:text-5xl lg:text-6xl;
		letter-spacing: -0.02em;
	}

	h2 {
		@apply text-3xl md:text-4xl lg:text-5xl;
		letter-spacing: -0.02em;
	}

	h3 {
		@apply text-2xl md:text-3xl lg:text-4xl;
	}

	h4 {
		@apply text-xl md:text-2xl lg:text-3xl;
	}

	h5 {
		@apply text-lg md:text-xl lg:text-2xl;
	}

	h6 {
		@apply text-base md:text-lg lg:text-xl;
	}
}