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

@layer base {
    html {
        scroll-behavior: smooth;
    }
}

@layer components {
    .gradient-text {
        @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
    }

    .gradient-bg {
        @apply bg-gradient-to-br from-gray-50 to-blue-50 dark:from-gray-900 dark:to-gray-800;
    }

    .nav-link {
        @apply text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors;
    }

    .section-title {
        @apply text-4xl font-bold text-gray-900 dark:text-white mb-4;
    }

    .section-subtitle {
        @apply text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto;
    }

    .card {
        @apply bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg dark:shadow-gray-900/50 hover:shadow-xl dark:hover:shadow-gray-900/70 transition-all duration-300;
    }

    .btn-primary {
        @apply bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300;
    }

    .input-field {
        @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white;
    }
}

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

    .animate-slide-up {
        animation: slideUp 0.5s ease-out forwards;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}