@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
	--background: 0 0% 100%;
	--foreground: 222 47% 11%;

	--card: 0 0% 100%;
	--card-foreground: 222 47% 11%;

	--popover: 0 0% 100%;
	--popover-foreground: 222 47% 11%;

	--primary: 196 100% 50%;
	--primary-foreground: 0 0% 100%;

	--secondary: 196 100% 97%;
	--secondary-foreground: 222 47% 11%;

	--muted: 196 30% 96%;
	--muted-foreground: 215 16% 47%;

	--accent: 196 100% 50%;
	--accent-foreground: 0 0% 100%;

	--destructive: 0 84% 60%;
	--destructive-foreground: 0 0% 100%;

	--border: 196 30% 90%;
	--input: 196 30% 90%;
	--ring: 196 100% 50%;

	--radius: 0.75rem;

	/* Custom Colors */
	--cyan: 196 100% 50%;
	--cyan-light: 196 100% 95%;
	--navy: 222 47% 11%;
	--navy-light: 222 47% 25%;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 hsl(222 47% 11% / 0.05);
	--shadow-md: 0 4px 6px -1px hsl(222 47% 11% / 0.07), 0 2px 4px -2px hsl(222 47% 11% / 0.05);
	--shadow-lg: 0 10px 15px -3px hsl(222 47% 11% / 0.08), 0 4px 6px -4px hsl(222 47% 11% / 0.05);
	--shadow-xl: 0 20px 25px -5px hsl(222 47% 11% / 0.1), 0 8px 10px -6px hsl(222 47% 11% / 0.05);

	--shadow-primary: 0 20px 25px -5px hsl(var(--primary) / 0.25), 0 8px 10px -6px hsl(var(--primary) / 0.25);
	--shadow-primary-md: 0 20px 25px -5px hsl(var(--primary) / 0.3), 0 8px 10px -6px hsl(var(--primary) / 0.3);
    --gradient-primary: linear-gradient(135deg, hsl(196 100% 50%), hsl(205 100% 60%));
}

* {
	box-sizing: border-box;
	border-color: var(--border);
}

body {
	margin: 0;
	background-color: var(--background);
	color: var(--foreground);
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

.text-fl-primary {
	color: hsl(var(--primary));
}

.bg-fl-primary {
	background-color: hsl(var(--primary)) !important;
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-gradient {
	background: linear-gradient(135deg, hsl(196 100% 50%), hsl(205 100% 60%));
	-webkit-background-clip: text;
	color: transparent !important;
}

.bg-gradient-mesh {
	background: linear-gradient(to bottom right, hsl(196 100% 95%) 0%, hsl(0 0% 100%) 50%, hsla(330, 100%, 88%, 0.3) 100%);
}

.bg-gradient {
	background: linear-gradient(135deg, hsl(196 100% 50%), hsl(205 100% 60%)) !important;
}

.bg-gradient-dark {
	background: linear-gradient(135deg, hsl(222 47% 11%) 0%, hsl(222 47% 18%) 100%);
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(-5px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}