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

body {
	font-family: Arial, Helvetica, sans-serif;
}

@layer base {
	:root {
		--background: 0 0% 98%;
		--foreground: 226 32% 15%;
		--card: 0 0% 100%;
		--card-foreground: 226 32% 15%;
		--popover: 0 0% 100%;
		--popover-foreground: 226 32% 15%;
		--primary: 354 70% 44%;
		--primary-foreground: 0 0% 98%;
		--secondary: 0 0% 94%;
		--secondary-foreground: 226 32% 15%;
		--muted: 0 0% 94%;
		--muted-foreground: 226 32% 70%;
		--accent: 354 70% 44%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 84% 60%;
		--destructive-foreground: 0 0% 98%;
		--border: 0 0% 90%;
		--input: 0 0% 94%;
		--ring: 354 70% 44%;
		--radius: 0.75rem;
		--chart-1: 354 70% 44%;
		--chart-2: 20 90% 50%;
		--chart-3: 200 90% 50%;
		--chart-4: 300 90% 50%;
		--chart-5: 60 90% 50%;
	}

	.dark {
		--background: 226 32% 15%;
		--foreground: 0 0% 98%;
		--card: 226 32% 20%;
		--card-foreground: 0 0% 98%;
		--popover: 226 32% 20%;
		--popover-foreground: 0 0% 98%;
		--primary: 354 70% 44%;
		--primary-foreground: 0 0% 98%;
		--secondary: 226 32% 25%;
		--secondary-foreground: 0 0% 98%;
		--muted: 226 32% 25%;
		--muted-foreground: 0 0% 70%;
		--accent: 354 70% 44%;
		--accent-foreground: 0 0% 98%;
		--destructive: 0 84% 60%;
		--destructive-foreground: 0 0% 98%;
		--border: 226 32% 35%;
		--input: 226 32% 25%;
		--ring: 354 70% 44%;
		--radius: 0.75rem;
		--chart-1: 354 70% 44%;
		--chart-2: 20 90% 50%;
		--chart-3: 200 90% 50%;
		--chart-4: 300 90% 50%;
		--chart-5: 60 90% 50%;
	}
}

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

	body {
		@apply bg-background text-foreground;
	}

	h1 {
		@apply text-4xl font-bold;
	}
}

@layer base {
	* {
		@apply border-border outline-ring/50;
	}
	body {
		@apply bg-background text-foreground;
	}
}