@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");
@import "tailwindcss";

@source "../node_modules/streamdown/dist/*.js";

@theme {
	--font-sans:
		"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
		"Segoe UI Symbol", "Noto Color Emoji";
	--font-serif: "Source Serif 4", ui-serif, serif;
}

:root,
html,
body {
	@apply w-full h-full;
}

@keyframes popover-in {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(4px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes popover-out {
	from {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
	to {
		opacity: 0;
		transform: scale(0.95) translateY(4px);
	}
}

html,
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	@apply bg-stone-50 dark:bg-stone-900 text-stone-900 dark:text-stone-200 selection:bg-teal-600 dark:selection:bg-teal-500 selection:text-stone-50 dark:selection:text-stone-900;

	@media (prefers-color-scheme: dark) {
		color-scheme: dark;
	}
}