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

@layer components {
    .glass-button {
        @apply flex items-center justify-center w-full py-4 px-6 bg-white/80 dark:bg-[#1E293B]/80 text-[#1E293B] dark:text-[#F1F5F9] rounded-2xl font-semibold shadow-sm border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-[#1E293B] hover:shadow-md transition-all duration-300 backdrop-blur-sm;
    }
    
    .guide-card {
        @apply block bg-white dark:bg-[#1E293B] p-4 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-800 hover:shadow-md hover:border-gray-200 dark:hover:border-gray-700 transition-all duration-300 transform hover:-translate-y-1;
    }
}