@import 'tailwindcss';
@import '@manacore/shared-tailwind/themes.css';

:root {
	/* SkillTree - Emerald/Green Theme (Growth & Progress) */
	--color-primary: #10b981;
	--color-primary-hover: #059669;
	--color-primary-light: #34d399;
	--color-primary-dark: #047857;

	--color-secondary: #ecfdf5;
	--color-secondary-hover: #d1fae5;

	--color-accent: #6ee7b7;
	--color-accent-hover: #34d399;

	/* XP & Level Colors */
	--color-xp: #fbbf24;
	--color-xp-glow: rgba(251, 191, 36, 0.4);
	--color-level-up: #f59e0b;

	/* Skill Levels */
	--color-level-0: #6b7280;
	--color-level-1: #3b82f6;
	--color-level-2: #8b5cf6;
	--color-level-3: #ec4899;
	--color-level-4: #f97316;
	--color-level-5: #fbbf24;

	/* Branch Colors */
	--color-branch-intellect: #3b82f6;
	--color-branch-body: #ef4444;
	--color-branch-creativity: #ec4899;
	--color-branch-social: #8b5cf6;
	--color-branch-practical: #f97316;
	--color-branch-mindset: #10b981;
}

/* Dark mode overrides */
:root.dark {
	--color-secondary: #064e3b;
	--color-secondary-hover: #065f46;
}

/* Skill card */
.skill-card {
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.skill-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px -5px rgba(16, 185, 129, 0.2);
}

/* XP Progress Bar */
.xp-bar {
	background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-xp) 100%);
	transition: width 0.5s ease;
}

.xp-bar-container {
	background: rgba(107, 114, 128, 0.2);
	overflow: hidden;
}

/* Level badge glow animation */
@keyframes level-glow {
	0%,
	100% {
		box-shadow: 0 0 5px var(--color-xp-glow);
	}
	50% {
		box-shadow: 0 0 20px var(--color-xp-glow);
	}
}

.level-badge-glow {
	animation: level-glow 2s ease-in-out infinite;
}

/* Level up animation */
@keyframes level-up {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.level-up-animation {
	animation: level-up 0.5s ease-in-out;
}

/* Branch indicator */
.branch-indicator {
	width: 4px;
	border-radius: 2px;
}

/* Skill tree node */
.tree-node {
	transition:
		transform 0.2s ease,
		opacity 0.2s ease;
}

.tree-node:hover {
	transform: scale(1.05);
}

.tree-node.locked {
	opacity: 0.5;
	filter: grayscale(0.8);
}

/* Progress ring */
.progress-ring {
	transition: stroke-dashoffset 0.5s ease;
}

/* Add XP button pulse */
@keyframes pulse-xp {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
	}
	50% {
		box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
	}
}

.pulse-xp:hover {
	animation: pulse-xp 1.5s infinite;
}
