/* Design System v2.0 - Premium Identity & Enhanced Interactions
 * Fonte Display: Outfit
 * Gradients Premium
 * Hover States Aprimorados
 * Animations Premium
 */

/* Importar este arquivo no index.html para as melhorias:
<link rel="stylesheet" href="/styles/premium-design-system.css" />
*/

/* ============================
   GRADIENTS PREMIUM
   ============================ */

@layer base {
	:root {
		/* Gradient da Marca (Sky Blue → Purple) */
		--gradient-brand: linear-gradient(
			135deg,
			hsl(211, 100%, 50%) 0%,
			hsl(219, 83%, 42%) 100%
		);

		/* Gradient Secundário (Cinza → Azul Escuro) */
		--gradient-secondary: linear-gradient(
			135deg,
			hsl(220, 14.3%, 95.9%) 0%,
			hsl(222.2, 47.4%, 11.2%) 100%
		);

		/* Gradient Accent (Emerald → Teal) */
		--gradient-accent: linear-gradient(
			135deg,
			hsl(158, 64%, 52%) 0%,
			hsl(173, 85%, 50%) 100%
		);

		/* Gradient Warm (Laranja → Vermelho) */
		--gradient-warm: linear-gradient(
			135deg,
			hsl(38, 92%, 50%) 0%,
			hsl(0, 84.2%, 60.2%) 100%
		);

		/* Gradient Cool (Azul → Cyan) */
		--gradient-cool: linear-gradient(
			135deg,
			hsl(211, 100%, 50%) 0%,
			hsl(191, 100%, 50%) 100%
		);

		/* Gradient Dark (Elevado) */
		--gradient-dark: linear-gradient(
			135deg,
			hsl(222.2, 47.4%, 11.2%) 0%,
			hsl(217.2, 32.6%, 17.5%) 100%
		);

		/* Gradient Glass (Transparência) */
		--gradient-glass: linear-gradient(
			135deg,
			hsla(211, 100%, 50%, 0.1) 0%,
			hsla(211, 100%, 50%, 0.05) 100%
		);

		/* Gradient Neon (Efeito glow) */
		--gradient-neon: linear-gradient(
			135deg,
			hsl(211, 100%, 50%) 0%,
			hsl(199, 89%, 48%) 100%
		);

		/* Gradient Gold (Premium) */
		--gradient-gold: linear-gradient(
			135deg,
			hsl(45, 90%, 51%) 0%,
			hsl(38, 82%, 51%) 100%
		);

		/* Gradient Success (Emerald intensificado) */
		--gradient-success: linear-gradient(
			135deg,
			hsl(158, 64%, 42%) 0%,
			hsl(158, 84%, 52%) 100%
		);
	}

	.dark {
		--gradient-brand: linear-gradient(
			135deg,
			hsl(210, 95%, 38%) 0%,
			hsl(199, 89%, 48%) 100%
		);
		--gradient-accent: linear-gradient(
			135deg,
			hsl(158, 64%, 62%) 0%,
			hsl(173, 85%, 60%) 100%
		);
		--gradient-dark: linear-gradient(
			135deg,
			hsl(217.2, 32.6%, 11.2%) 0%,
			hsl(210, 20%, 20%) 100%
		);
		--gradient-neon: linear-gradient(
			135deg,
			hsl(210, 95%, 43%) 0%,
			hsl(199, 89%, 53%) 100%
		);
		--gradient-success: linear-gradient(
			135deg,
			hsl(158, 64%, 52%) 0%,
			hsl(158, 84%, 52%) 100%
		);
	}
}

/* ============================
   MOTION TOKENS
   ============================ */

@layer base {
	:root {
		/* Durations */
		--duration-instant: 100ms;
		--duration-fast: 150ms;
		--duration-base: 200ms;
		--duration-slow: 300ms;
		--duration-slower: 500ms;

		/* Easing Curves */
		--ease-linear: linear;
		--ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
		--ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
		--ease-elastic-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
		--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	}
}

/* ============================
   HOVER STATES ENHANCED
   ============================ */

.card-premium-hover {
	transition:
		transform 0.4s var(--ease-out-back),
		box-shadow 0.4s var(--ease-out-back),
		border-color 0.4s var(--ease-out-back);

	&:hover {
		transform: translateY(-6px) scale(1.03);
		box-shadow:
			0 32px 64px -10px rgba(0, 0, 0, 0.15),
			0 16px 32px -8px rgba(0, 0, 0, 0.25),
			0 8px 16px -6px rgba(0, 0, 0, 0.35);
		border-color: hsl(var(--primary) / 0.4);
		z-index: 10;
	}

	&:active {
		transform: translateY(-3px) scale(1.01);
	}
}

.button-premium-hover {
	transition: all 0.3s var(--ease-out-back);

	&:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.15);
	}
}

.link-premium-hover {
	transition: all 0.2s var(--ease-in-out-quart);
	position: relative;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background: hsl(var(--primary) / 0.3);
		transform: scaleX(0);
		transition: transform 0.3s var(--ease-in-out-quart);
	}

	&:hover::after {
		transform: scaleX(1);
	}
}

/* ============================
   MICRO-INTERACTIONS
   ============================ */

.magnetic-button {
	position: relative;
	transition: transform 0.3s var(--ease-elastic-out);
	transform-origin: center;

	&:hover {
		transform: scale(1.05);
	}
}

.glow-on-hover {
	transition: box-shadow 0.3s var(--ease-out-back);

	&:hover {
		box-shadow:
			0 0 8px hsl(var(--primary) / 0.4),
			0 4px 24px hsl(var(--primary) / 0.6),
			0 2px 48px hsl(var(--primary) / 0.8);
		z-index: 5;
	}
}

.shimmer-card {
	position: relative;
	overflow: hidden;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0) 50%,
			transparent 100%
		);
		animation: shimmer 1.5s infinite;
	}
}

@keyframes shimmer {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(100%);
	}
}

/* ============================
   TEXT ON GRADIENTS
   ============================ */

.text-on-gradient-brand {
	color: hsl(var(--primary-foreground));
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.text-on-gradient-white {
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================
   UTILITY CLASSES
   ============================ */

.gradient-brand {
	background: var(--gradient-brand);
}

.gradient-secondary {
	background: var(--gradient-secondary);
}

.gradient-accent {
	background: var(--gradient-accent);
}

.gradient-warm {
	background: var(--gradient-warm);
}

.gradient-cool {
	background: var(--gradient-cool);
}

.gradient-dark {
	background: var(--gradient-dark);
}

.gradient-glass {
	background: var(--gradient-glass);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.gradient-neon {
	background: var(--gradient-neon);
	box-shadow: 0 0 12px hsl(var(--primary) / 0.5);
}

/* ============================
   ANIMATION CLASSES
   ============================ */

.animate-fade-up {
	animation: fade-up var(--duration-base) var(--ease-in-out-quart);
}

.animate-slide-up {
	animation: slide-up var(--duration-base) var(--ease-in-out-quart);
}

.animate-scale-in {
	animation: scale-in var(--duration-base) var(--ease-out-back);
}

.animate-bounce-in {
	animation: bounce-in var(--duration-slower) var(--ease-bounce);
}

.animate-stagger-in {
	animation: stagger-in var(--duration-base) var(--ease-out-back);
}

/* ============================
   PREMIUM SHADOWS
   ============================ */

.shadow-glow {
	box-shadow:
		0 0 8px hsl(var(--primary) / 0.4),
		0 0 12px hsl(var(--primary) / 0.6);
}

.shadow-elevated {
	box-shadow:
		0 20px 40px -12px rgba(0, 0, 0, 0.12),
		0 10px 20px -6px rgba(0, 0, 0, 0.2);
}

.shadow-premium {
	box-shadow:
		0 32px 64px -10px rgba(0, 0, 0, 0.15),
		0 16px 32px -8px rgba(0, 0, 0, 0.25);
}