/* Tailwind CSS Configuration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom CSS Variables */
:root {
    --luna-blue: #0066cc;
    --luna-dark-blue: #004499;
    --luna-light-blue: #e6f3ff;
    --luna-teal: #20b2aa;
    --luna-gray: #f8f9fa;
    /* Home page specific colors */
    --healthcare-primary: #0A4D8C;
    --healthcare-secondary: #008B8B;
    --accent-green: #2D6A4F;
    --accent-purple: #5B4B8A;
    --accent-coral: #E85D75;
    --neutral-light: #F9FAFB;
    --neutral-medium: #E5E7EB;
    --text-dark: #1F2937;
    --text-medium: #4B5563;
    --text-light: #6B7280;
}

/* Custom Component Classes */
@layer components {
    .luna-btn-primary {
        @apply bg-luna-blue text-white px-8 py-3 rounded-full font-semibold hover:bg-luna-dark-blue transition-colors;
    }
    
    .luna-btn-secondary {
        @apply border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-luna-blue transition-colors;
    }
    
    .luna-card {
        @apply bg-white rounded-lg shadow-lg p-6 hover:shadow-xl transition-shadow;
    }
    
    .luna-input {
        @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-luna-blue focus:outline-none;
    }
}

/* Custom Utilities */
@layer utilities {
    .text-luna-blue {
        color: var(--luna-blue);
    }
    
    .text-luna-dark-blue {
        color: var(--luna-dark-blue);
    }
    
    .text-luna-teal {
        color: var(--luna-teal);
    }
    
    .bg-luna-blue {
        background-color: var(--luna-blue);
    }
    
    .bg-luna-dark-blue {
        background-color: var(--luna-dark-blue);
    }
    
    .bg-luna-light-blue {
        background-color: var(--luna-light-blue);
    }
    
    .bg-luna-teal {
        background-color: var(--luna-teal);
    }
    
    .bg-luna-gray {
        background-color: var(--luna-gray);
    }
    
    /* Home page specific utilities */
    .text-healthcare-primary {
        color: var(--healthcare-primary);
    }
    
    .text-healthcare-secondary {
        color: var(--healthcare-secondary);
    }
    
    .text-accent-green {
        color: var(--accent-green);
    }
    
    .text-accent-purple {
        color: var(--accent-purple);
    }
    
    .text-accent-coral {
        color: var(--accent-coral);
    }
    
    .text-text-dark {
        color: var(--text-dark);
    }
    
    .text-text-medium {
        color: var(--text-medium);
    }
    
    .text-text-light {
        color: var(--text-light);
    }
    
    .bg-healthcare-primary {
        background-color: var(--healthcare-primary);
    }
    
    .bg-healthcare-secondary {
        background-color: var(--healthcare-secondary);
    }
    
    .bg-accent-green {
        background-color: var(--accent-green);
    }
    
    .bg-accent-purple {
        background-color: var(--accent-purple);
    }
    
    .bg-accent-coral {
        background-color: var(--accent-coral);
    }
    
    .bg-neutral-light {
        background-color: var(--neutral-light);
    }
    
    .bg-neutral-medium {
        background-color: var(--neutral-medium);
    }
}

/* Additional Custom Styles */
.gradient-hero {
    background: linear-gradient(135deg, var(--luna-blue) 0%, var(--luna-teal) 100%);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom dropdown animation */
.dropdown-menu {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(-10px);
}

.dropdown-menu.show {
    transform: translateY(0);
}

/* Home page specific styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.gradient-text {
    background: linear-gradient(135deg, var(--healthcare-primary) 0%, var(--healthcare-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}