@import 'tailwindcss';

/* :root {
  --primary-color: #f9d200;
  --primary-hover: #e0bd00;
  --primary-light: #fff9c4;
  --primary-subtle: #fefde8;
  --primary-background: #111827;
  --primary-background-light: #f8fafc;
} */

:root {
	--primary-color: #40a1a7;
	--primary-hover: #2d787c;
	--primary-light: #ccecee;
	--primary-subtle: #f0fdfa;
	--primary-background: #111827;
	--primary-background-light: #f8fafc;
	--primary-text: #f8fafc;
}

@layer base {
	body {
		font-family:
			'Plus Jakarta Sans',
			system-ui,
			-apple-system,
			sans-serif;
	}
}

/* Custom Class Mappings */
.text-primary {
	color: var(--primary-color);
}

.bg-primary {
	background-color: var(--primary-color);
}

.hover\:bg-primary-hover:hover {
	background-color: var(--primary-hover);
}

.hover\:text-primary:hover {
	color: var(--primary-color);
}

/* Floating Animation for Phone Frame */
@keyframes float {
	0%,
	100% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-12px);
	}
}

.animate-float {
	animation: float 4s ease-in-out infinite;
}

/* Background Glow Pulse */
@keyframes pulse-glow {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(1);
	}
	50% {
		opacity: 0.8;
		transform: scale(1.05);
	}
}

.animate-glow {
	animation: pulse-glow 3s infinite ease-in-out;
}