@import url('https://fonts.googleapis.com/icon?family=Material+Icons') layer(base);
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;900&display=swap')
	layer(base);

@import 'tailwindcss';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms' {
	strategy: 'class';
}

@theme {
	--font-sans: Archivo, sans-serif;
	--color-primary: #e2322f;
	--color-secondary: #d1190f;
	--color-dark: #454444;
	--color-lighter: #ededed;
}

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

:root {
	--primary: var(--color-primary);
	--secondary: var(--color-secondary);
}

* {
	user-select: none;
}

html {
	@media (min-width: 1280px) {
		font-size: 22px;
	}
}

body {
	background-color: #fff;
	min-height: 100dvh;
	overflow-x: hidden;
}

input,
textarea {
	user-select: text;
}

// Forms
:is(.form-input, .form-select) ~ span {
	display: none;
}

.is-invalid ~ span {
	display: block;
}