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

@font-face {
	font-family: "Fredoka";
	src: url("/fonts/fredoka-variable.ttf") format("truetype");
}

@layer base {
	:root {
		/* Backgrounds - Clean neutral grays */
		--background: 0 0% 98%;
		--foreground: 222 47% 11%;
		--card: 0 0% 100%;
		--card-foreground: 222 47% 11%;
		--popover: 0 0% 100%;
		--popover-foreground: 222 47% 11%;
		
		/* Primary - Modern slate/blue (Stripe-inspired) */
		--primary: 221 83% 53%;
		--primary-foreground: 0 0% 100%;
		
		/* Secondary - Soft gray-blue */
		--secondary: 214 32% 91%;
		--secondary-foreground: 222 47% 11%;
		
		/* Muted - Light grays */
		--muted: 210 40% 96%;
		--muted-foreground: 215 16% 47%;
		
		/* Accent - Vibrant blue */
		--accent: 217 91% 60%;
		--accent-foreground: 0 0% 100%;
		
		/* Destructive - Red for errors */
		--destructive: 0 84% 60%;
		--destructive-foreground: 0 0% 100%;
		
		/* Borders & Inputs - Subtle gray */
		--border: 214 32% 91%;
		--input: 214 32% 91%;
		--ring: 221 83% 53%;
		
		/* Charts - Modern palette */
		--chart-1: 221 83% 53%;
		--chart-2: 142 76% 36%;
		--chart-3: 262 83% 58%;
		--chart-4: 41 96% 50%;
		--chart-5: 0 84% 60%;
		
		/* Sidebar */
		--sidebar: 0 0% 98%;
		--sidebar-foreground: 222 47% 11%;
		--sidebar-primary: 221 83% 53%;
		--sidebar-primary-foreground: 0 0% 100%;
		--sidebar-accent: 214 32% 91%;
		--sidebar-accent-foreground: 222 47% 11%;
		--sidebar-border: 214 32% 91%;
		--sidebar-ring: 221 83% 53%;
		
		/* Typography */
		--font-sans: Fredoka, sans-serif;
		--font-serif: Georgia, serif;
		--font-mono: ui-monospace, monospace;
		
		/* Design tokens */
		--radius: 0.5rem;
		
		/* Shadows - Neutral */
		--shadow-color: 220 9% 46%;
		--shadow-2xs: 0 1px 2px 0 hsl(220 9% 46% / 0.05);
		--shadow-xs: 0 1px 3px 0 hsl(220 9% 46% / 0.1);
		--shadow-sm: 0 2px 4px 0 hsl(220 9% 46% / 0.1);
		--shadow: 0 4px 6px -1px hsl(220 9% 46% / 0.1);
		--shadow-md: 0 6px 12px -2px hsl(220 9% 46% / 0.15);
		--shadow-lg: 0 10px 20px -5px hsl(220 9% 46% / 0.2);
		--shadow-xl: 0 20px 25px -5px hsl(220 9% 46% / 0.25);
		--shadow-2xl: 0 25px 50px -12px hsl(220 9% 46% / 0.3);
	}

	.dark {
		/* Backgrounds - Dark mode */
		--background: 222 47% 11%;
		--foreground: 210 40% 98%;
		--card: 222 47% 15%;
		--card-foreground: 210 40% 98%;
		--popover: 222 47% 15%;
		--popover-foreground: 210 40% 98%;
		
		/* Primary - Brighter blue for dark mode */
		--primary: 217 91% 60%;
		--primary-foreground: 222 47% 11%;
		
		/* Secondary */
		--secondary: 217 33% 17%;
		--secondary-foreground: 210 40% 98%;
		
		/* Muted */
		--muted: 223 47% 11%;
		--muted-foreground: 215 20% 65%;
		
		/* Accent */
		--accent: 217 91% 60%;
		--accent-foreground: 222 47% 11%;
		
		/* Destructive */
		--destructive: 0 63% 50%;
		--destructive-foreground: 210 40% 98%;
		
		/* Borders & Inputs */
		--border: 217 33% 17%;
		--input: 217 33% 17%;
		--ring: 217 91% 60%;
		
		/* Charts */
		--chart-1: 217 91% 60%;
		--chart-2: 142 76% 36%;
		--chart-3: 262 83% 58%;
		--chart-4: 41 96% 50%;
		--chart-5: 0 84% 60%;
		
		/* Sidebar */
		--sidebar: 222 47% 11%;
		--sidebar-foreground: 210 40% 98%;
		--sidebar-primary: 217 91% 60%;
		--sidebar-primary-foreground: 222 47% 11%;
		--sidebar-accent: 217 33% 17%;
		--sidebar-accent-foreground: 210 40% 98%;
		--sidebar-border: 217 33% 17%;
		--sidebar-ring: 217 91% 60%;
		
		/* Typography */
		--font-sans: Fredoka, sans-serif;
		--font-serif: Georgia, serif;
		--font-mono: ui-monospace, monospace;
		
		/* Design tokens */
		--radius: 0.5rem;
		
		/* Shadows - Dark mode */
		--shadow-color: 0 0% 0%;
		--shadow-2xs: 0 1px 2px 0 hsl(0 0% 0% / 0.3);
		--shadow-xs: 0 1px 3px 0 hsl(0 0% 0% / 0.4);
		--shadow-sm: 0 2px 4px 0 hsl(0 0% 0% / 0.4);
		--shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.4);
		--shadow-md: 0 6px 12px -2px hsl(0 0% 0% / 0.5);
		--shadow-lg: 0 10px 20px -5px hsl(0 0% 0% / 0.6);
		--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.7);
		--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.75);
	}
}

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

	body {
		@apply bg-background text-foreground;
		scroll-behavior: smooth;
		font-family:
			"Fredoka",
			-apple-system,
			BlinkMacSystemFont,
			"Segoe UI",
			Roboto,
			"Helvetica Neue",
			Arial,
			sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 400;
		letter-spacing: -0.02em;
	}
}

/* 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 */
	}

	/* Stripe-inspired gradients */
	.gradient-mesh {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.gradient-success {
		background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
	}

	.gradient-error {
		background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	}

	/* Smooth transitions */
	.transition-smooth {
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Glass morphism effect */
	.glass {
		background: rgba(255, 255, 255, 0.7);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
}

/* Custom Scrollbar Styling */
@layer base {
	/* For Webkit browsers (Chrome, Safari, Edge) */
	::-webkit-scrollbar {
		width: 12px;
		height: 12px;
	}

	::-webkit-scrollbar-track {
		background: white;
		border-radius: 10px;
	}

	::-webkit-scrollbar-thumb {
		background: hsl(var(--primary));
		border-radius: 10px;
		border: 3px solid white;
	}

	::-webkit-scrollbar-thumb:hover {
		background: hsl(var(--primary) / 0.8);
	}

	/* For Firefox */
	* {
		scrollbar-width: thin;
		scrollbar-color: hsl(var(--primary)) white;
	}

	/* Thin scrollbar for command lists */
	.command-scrollbar::-webkit-scrollbar {
		width: 8px;
	}

	.command-scrollbar::-webkit-scrollbar-track {
		background: hsl(var(--muted));
		border-radius: 10px;
	}

	.command-scrollbar::-webkit-scrollbar-thumb {
		background: hsl(var(--primary));
		border-radius: 10px;
		border: 2px solid hsl(var(--muted));
	}

	.command-scrollbar::-webkit-scrollbar-thumb:hover {
		background: hsl(var(--primary) / 0.8);
	}
}

.all-reset {
	all: unset;
}

/* Custom focus styles for better accessibility */
@layer base {
	*:focus-visible {
		@apply outline-none ring-2 ring-primary ring-offset-2;
	}
}

/* Smooth page transitions */
@layer base {
	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}
}