@layer utilities {
    .glass-effect {
        @apply bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-xl border border-white border-opacity-20 shadow-glass;
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
    }

    .btn-primary {
        @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50;
    }

    .btn-secondary {
        @apply bg-secondary hover:bg-secondary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-opacity-50;
    }

    .btn-outline {
        @apply border border-primary text-primary hover:bg-primary hover:text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50;
    }

    .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
    }
}