@import "tailwindcss";

:root {
	--background: #ffffff;
	--foreground: #171717;

	/* Primary color - Electric Blue */
	--color-primary-50: #edfaff;
	--color-primary-100: #d6f2ff;
	--color-primary-200: #b5e9ff;
	--color-primary-300: #83ddff;
	--color-primary-400: #48c7ff;
	--color-primary-500: #1eaaff;
	--color-primary-600: #0a8aff;
	--color-primary-700: #0071e6;
	--color-primary-800: #085cb8;
	--color-primary-900: #0d4d91;
	--color-primary-950: #0a2e5a;

	/* Secondary color - Neon Purple */
	--color-secondary-50: #f5f3ff;
	--color-secondary-100: #ede8ff;
	--color-secondary-200: #dcd5ff;
	--color-secondary-300: #c3b2ff;
	--color-secondary-400: #a683ff;
	--color-secondary-500: #8a4fff;
	--color-secondary-600: #7c2dff;
	--color-secondary-700: #6b1df9;
	--color-secondary-800: #5a18d3;
	--color-secondary-900: #4b16ab;
	--color-secondary-950: #2c0a76;

	/* Accent color - Neon Green */
	--color-accent-50: #edfff7;
	--color-accent-100: #d5ffee;
	--color-accent-200: #aeffde;
	--color-accent-300: #70ffc7;
	--color-accent-400: #2bffa7;
	--color-accent-500: #00e889;
	--color-accent-600: #00c06f;
	--color-accent-700: #00985a;
	--color-accent-800: #00774a;
	--color-accent-900: #00623f;
	--color-accent-950: #003722;
}

/* Dark mode overrides */
.dark {
	--background: #0a0a0a;
	--foreground: #ededed;
}

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

@keyframes pulse {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.7;
	}
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideInFromRight {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes scaleUp {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}

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

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

.animate-slide-left {
	animation: slideInFromLeft 0.5s ease-out forwards;
}

.animate-slide-right {
	animation: slideInFromRight 0.5s ease-out forwards;
}

.animate-fade-in {
	animation: fadeIn 0.5s ease-out forwards;
}

.animate-scale-up {
	animation: scaleUp 0.5s ease-out forwards;
}

.animate-shimmer {
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	background-size: 1000px 100%;
	animation: shimmer 2s infinite linear;
}

/* Glassmorphism */
.glass {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-dark {
	background: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.input-field {
	@apply px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
}

.btn-primary {
	@apply px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
}

/* Gradient backgrounds */
.bg-gradient-blue {
	background: linear-gradient(
		135deg,
		var(--color-primary-500),
		var(--color-primary-700)
	);
}

.bg-gradient-purple {
	background: linear-gradient(
		135deg,
		var(--color-secondary-500),
		var(--color-secondary-700)
	);
}

.bg-gradient-green {
	background: linear-gradient(
		135deg,
		var(--color-accent-500),
		var(--color-accent-700)
	);
}

.bg-gradient-mixed {
	background: linear-gradient(
		135deg,
		var(--color-primary-500),
		var(--color-secondary-500),
		var(--color-accent-500)
	);
}

/* Futuristic card */
.card-futuristic {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
}

.card-futuristic:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Neon effects */
.neon-text {
	text-shadow: 0 0 5px rgba(30, 170, 255, 0.5), 0 0 10px rgba(30, 170, 255, 0.3);
}

.neon-border {
	box-shadow: 0 0 5px rgba(30, 170, 255, 0.5), 0 0 10px rgba(30, 170, 255, 0.3);
}

.neon-purple-text {
	text-shadow: 0 0 5px rgba(138, 79, 255, 0.5), 0 0 10px rgba(138, 79, 255, 0.3);
}

.neon-green-text {
	text-shadow: 0 0 5px rgba(0, 232, 137, 0.5), 0 0 10px rgba(0, 232, 137, 0.3);
}

/* Mobile optimizations */
@media (max-width: 640px) {
	.mobile-container {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.mobile-text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}

	.mobile-text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.mobile-py-2 {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	.mobile-px-3 {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.mobile-space-y-2 > * + * {
		margin-top: 0.5rem;
	}

	.mobile-touch-scroll {
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
	}
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: var(--color-primary-400);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-primary-600);
}