@import 'tailwindcss';

@theme {
	--font-*: initial;
	--font-sans: Inter, sans-serif;
	--font-serif: Source Serif Pro, serif;
}

@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}
}

@utility box {
	@apply flex items-center gap-2 rounded-lg border border-solid border-slate-300 bg-slate-50 px-3 py-2 text-nowrap outline-0 outline-teal-100 transition-all [&>svg]:h-4;

	&:focus,
	&:focus-within {
		@apply border-teal-400! outline-4;
	}
}

@layer base {
	@font-face {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src: url(/fonts/Inter-Medium.ttf) format('ttf');
	}

	@font-face {
		font-family: 'Inter';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(/fonts/Inter-SemiBold.ttf) format('ttf');
	}

	@font-face {
		font-family: 'Source Serif Pro';
		font-style: normal;
		font-weight: 600;
		font-display: swap;
		src: url(/fonts/SourceSerifPro-Semibold.otf) format('otf');
	}

	@font-face {
		font-family: 'Source Serif Pro';
		font-style: italic;
		font-weight: 600;
		font-display: swap;
		src: url(/fonts/SourceSerifPro-SemiboldIt.otf) format('otf');
	}

	html {
		@apply bg-slate-50 text-[14px] md:text-base;
	}

	body {
		@apply overflow-y-scroll font-sans font-medium text-slate-800;
	}

	*::selection {
		@apply bg-teal-200;
	}

	#confetti {
		@apply pointer-events-none;
	}
}
