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

@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;
	}
}
/* Custom heading styles */
@layer components {
	h1 {
		@apply mb-4 text-4xl font-bold text-gray-900;
	}

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

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

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

	h5 {
		@apply mb-1 text-lg font-medium text-gray-500;
	}

	h6 {
		@apply mb-1 text-base font-medium text-gray-400;
	}
}

@layer markdown {
	.app-markdown {
		h1 {
			@apply mt-8 mb-4 text-3xl font-bold;
		}

		h2 {
			@apply mt-6 mb-3 text-2xl font-semibold;
		}

		h3 {
			@apply mt-5 mb-2 text-xl font-semibold;
		}

		h4,
		h5,
		h6 {
			@apply mt-4 mb-2 text-xl font-medium;
		}

		a {
			@apply text-blue-600 underline transition-colors hover:text-blue-800;
		}

		ul {
			@apply mb-4 list-disc pl-6;
		}
		ol {
			@apply mb-4 list-decimal pl-6;
		}

		li {
			@apply mb-1;
		}

		table {
			@apply my-6 w-full border-collapse shadow-sm;
		}

		th,
		td {
			@apply border border-gray-200 px-4 py-2 text-left;
		}

		th {
			@apply font-semibold;
		}
		/**/
		/* tr:nth-child(even) { */
		/* 	@apply bg-gray-50; */
		/* } */
		blockquote {
			@apply rounded-md p-3 italic backdrop-blur-md;
		}
		p {
			@apply mb-2;
		}
	}
}