@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-Thin.ttf") format("truetype");
	font-weight: 100;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-ExtraLight.ttf") format("truetype");
	font-weight: 200;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-Light.ttf") format("truetype");
	font-weight: 300;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-Regular.ttf") format("truetype");
	font-weight: 400;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-Medium.ttf") format("truetype");
	font-weight: 500;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-ExtraBold.ttf") format("truetype");
	font-weight: 800;
}

@font-face {
	font-family: "Poppins";
	src: url("/fonts/Poppins-Black.ttf") format("truetype");
	font-weight: 900;
}

@layer base {
	:root {
		--background: 338 28% 98%;
		--foreground: 338 5% 10%;
		--card: 338 28% 98%;
		--card-foreground: 338 5% 15%;
		--popover: 338 28% 98%;
		--popover-foreground: 338 95% 10%;
		--primary: 338 63% 55.5%;
		--primary-foreground: 0 0% 100%;
		--secondary: 338 28% 90%;
		--secondary-foreground: 0 0% 0%;
		--muted: 300 28% 95%;
		--muted-foreground: 338 5% 40%;
		--accent: 300 28% 90%;
		--accent-foreground: 338 5% 15%;
		--destructive: 0 50% 50%;
		--destructive-foreground: 338 5% 98%;
		--border: 338 28% 82%;
		--input: 338 28% 50%;
		--ring: 338 63% 55.5%;
		--radius: 0.75rem;
	}
	.dark {
		--background: 338 28% 10%;
		--foreground: 338 5% 98%;
		--card: 338 28% 10%;
		--card-foreground: 338 5% 98%;
		--popover: 338 28% 5%;
		--popover-foreground: 338 5% 98%;
		--primary: 338 63% 55.5%;
		--primary-foreground: 0 0% 100%;
		--secondary: 338 28% 20%;
		--secondary-foreground: 0 0% 100%;
		--muted: 300 28% 25%;
		--muted-foreground: 338 5% 65%;
		--accent: 300 28% 25%;
		--accent-foreground: 338 5% 95%;
		--destructive: 0 50% 50%;
		--destructive-foreground: 338 5% 98%;
		--border: 338 28% 50%;
		--input: 338 28% 50%;
		--ring: 338 63% 55.5%;
		--radius: 0.75rem;
	}
}

@layer base {
	* {
		@apply border-border;
	}

	body {
		@apply bg-background text-foreground;
		scroll-behavior: smooth;
		font-family:
			"Poppins",
			system-ui,
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			Roboto,
			"Helvetica Neue",
			Arial,
			"Noto Sans",
			sans-serif,
			"Apple Color Emoji",
			"Segoe UI Emoji",
			"Segoe UI Symbol",
			"Noto Color Emoji";
	}
}

/* add the code bellow */
@layer utilities {
	/* Hide scrollbar for Chrome, Safari and Opera */
	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}
	/* Hide scrollbar for IE, Edge and Firefox */
	.no-scrollbar {
		-ms-overflow-style: none; /* IE and Edge */
		scrollbar-width: none; /* Firefox */
	}
}

.all-reset {
	all: unset;
}
