@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	/* Primary colors - Orange */
	--color-primary: #f97316;
	--color-primary-hover: #fb923c;
	--color-primary-glow: rgba(249, 115, 22, 0.3);

	/* Background colors - Dark theme */
	--color-background-page: #0a0a0f;
	--color-background-card: #141419;
	--color-background-card-hover: #1c1c24;

	/* Text colors */
	--color-text-primary: #f9fafb;
	--color-text-secondary: #d1d5db;
	--color-text-muted: #6b7280;

	/* Border colors */
	--color-border: #27272a;
	--color-border-hover: #3f3f46;
}

/* Apply CSS custom properties to Tailwind classes */
.bg-primary {
	background-color: var(--color-primary);
}
.bg-primary\/10 {
	background-color: rgba(249, 115, 22, 0.1);
}
.bg-background-page {
	background-color: var(--color-background-page);
}
.bg-background-card {
	background-color: var(--color-background-card);
}
.text-primary {
	color: var(--color-primary);
}
.text-text-primary {
	color: var(--color-text-primary);
}
.text-text-secondary {
	color: var(--color-text-secondary);
}
.text-text-muted {
	color: var(--color-text-muted);
}
.border-border {
	border-color: var(--color-border);
}
.border-primary {
	border-color: var(--color-primary);
}
.border-primary\/30 {
	border-color: rgba(249, 115, 22, 0.3);
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

/* Button hover effects */
.btn-primary {
	background: linear-gradient(135deg, var(--color-primary) 0%, #ea580c 100%);
	transition: all 0.3s ease;
}

.btn-primary:hover {
	box-shadow: 0 0 30px var(--color-primary-glow);
	transform: translateY(-2px);
}

/* Card hover effects */
.card-hover {
	transition: all 0.3s ease;
}

.card-hover:hover {
	border-color: rgba(249, 115, 22, 0.3);
	box-shadow: 0 0 40px rgba(249, 115, 22, 0.1);
}
