@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Custom styles for Reevam SaaS Platform */

@layer base {
    body {
        @apply text-text;
    }
    
    h1, h2, h3, h4, h5, h6 {
        @apply text-dark;
    }
}

@layer components {
    /* Button Styles */
    .btn-primary {
        @apply bg-primary hover:bg-primary-dark text-white px-6 py-3 rounded-lg font-semibold transition-all duration-200 hover:shadow-lg;
    }
    
    .btn-secondary {
        @apply bg-white hover:bg-light-purple text-primary border-2 border-primary px-6 py-3 rounded-lg font-semibold transition-all duration-200;
    }
    
    /* Card Styles */
    .card {
        @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow p-6;
    }
    
    /* Input Styles */
    .input-primary {
        @apply border-gray-300 focus:border-primary focus:ring focus:ring-primary focus:ring-opacity-50 rounded-lg;
    }
}

@layer utilities {
    /* Custom animations */
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}