@import url('https://fonts.googleapis.com/css2?family=Agu+Display&family=Fira+Code:wght@300..700&family=Geist:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@import './assets/fonts/qanelas/index.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	:root {
		--background: #f8fafc;

		--foreground: 0 0% 3.9%;

		--card: 0 0% 100%;

		--card-foreground: 0 0% 3.9%;

		--popover: 0 0% 100%;

		--popover-foreground: 0 0% 3.9%;

		--primary: 0 0% 9%;

		--primary-foreground: 0 0% 98%;

		--secondary: 0 0% 96.1%;

		--secondary-foreground: 0 0% 9%;

		--muted: 0 0% 96.1%;

		--muted-foreground: '#64748B';

		--accent: 0 0% 96.1%;

		--accent-foreground: #f4f4f5;

		--destructive: 0 84.2% 60.2%;

		--destructive-foreground: 0 0% 98%;

		--border: 0 0% 89.8%;

		--input: 0 0% 89.8%;

		--ring: 0 0% 3.9%;

		--chart-1: 12 76% 61%;

		--chart-2: 173 58% 39%;

		--chart-3: 197 37% 24%;

		--chart-4: 43 74% 66%;

		--chart-5: 27 87% 67%;

		--radius: 0.5rem;
	}
	.dark {
		--background: 0 0% 3.9%;

		--foreground: 0 0% 98%;

		--card: 0 0% 3.9%;

		--card-foreground: 0 0% 98%;

		--popover: 0 0% 3.9%;

		--popover-foreground: 0 0% 98%;

		--primary: 0 0% 98%;

		--primary-foreground: 0 0% 9%;

		--secondary: 0 0% 14.9%;

		--secondary-foreground: 0 0% 98%;

		--muted: 0 0% 14.9%;

		--muted-foreground: 0 0% 63.9%;

		--accent: 0 0% 14.9%;

		--accent-foreground: 0 0% 98%;

		--destructive: 0 62.8% 30.6%;

		--destructive-foreground: 0 0% 98%;

		--border: 0 0% 14.9%;

		--input: 0 0% 14.9%;

		--ring: 0 0% 83.1%;

		--chart-1: 220 70% 50%;

		--chart-2: 160 60% 45%;

		--chart-3: 30 80% 55%;

		--chart-4: 280 65% 60%;

		--chart-5: 340 75% 55%;
	}
}

@layer base {
	* {
		@apply border-border font-inter;
	}
	body {
		@apply bg-background text-foreground;
	}
}

@layer utilities {
	.card {
		@apply rounded-xl border border-gray-300 p-6;
	}
	.page {
		@apply flex flex-col px-4 py-12 h-screen;
	}
}
