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

@layer components {
    .glass {
        @apply bg-white/80 dark:bg-white/10 backdrop-blur-lg border border-gray-200 dark:border-white/20 shadow-xl;
    }

    .glass-card {
        @apply bg-white/80 dark:bg-slate-800/50 backdrop-blur-md border border-gray-200 dark:border-slate-700/50 shadow-lg rounded-xl p-6 transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl text-gray-800 dark:text-white;
    }

    .glass-icon {
        @apply bg-white/30 dark:bg-white/10 backdrop-blur-md border border-white/40 shadow-lg rounded-full flex items-center justify-center text-white relative overflow-hidden;
    }
    
    .glass-shine {
        @apply relative overflow-hidden;
    }
    
    .glass-shine::after {
        content: '';
        @apply absolute top-0 -left-[100%] w-full h-full bg-gradient-to-r from-transparent via-white/20 to-transparent transition-all duration-500;
        transform: skewX(-25deg);
    }
    
    .glass-shine:hover::after {
        @apply left-[100%];
    }

    .btn-primary {
        @apply px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all shadow-lg hover:shadow-blue-500/30;
    }

    .btn-outline {
        @apply px-6 py-3 border border-gray-300 dark:border-white/30 hover:bg-gray-100 dark:hover:bg-white/10 text-gray-800 dark:text-white font-semibold rounded-lg transition-all;
    }
    
    .animate-float {
        animation: float 6s ease-in-out infinite;
    }
    
    @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
    }
}

body {
    @apply bg-gray-50 dark:bg-slate-900 text-gray-900 dark:text-white font-sans antialiased transition-colors duration-300;
    /* Only apply gradient in dark mode or use a lighter gradient for light mode */
}

.dark body {
    background-image: radial-gradient(circle at top left, #1e293b, #0f172a);
}