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

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

@layer base {
    body {
        @apply bg-gray-50 font-sans text-gray-800;
    }
    
    h1, h2, h3, h4, h5, h6 {
        @apply font-sans font-bold text-gray-900;
    }
}

@layer components {
    /* Shadow Styles */
    .shadow-soft {
        @apply shadow-[0_10px_25px_-3px_rgba(0,0,0,0.05)];
    }
    
    .shadow-soft-lg {
        @apply shadow-[0_20px_25px_-5px_rgba(0,0,0,0.06),0_10px_10px_-5px_rgba(0,0,0,0.04)];
    }
    
    .shadow-soft-xl {
        @apply shadow-[0_25px_50px_-12px_rgba(0,0,0,0.1)];
    }
    
    /* Modern Soft Cards */
    .card {
        @apply bg-white rounded-3xl shadow-soft p-6 transition-all duration-300;
    }
    
    .card-hover {
        @apply hover:shadow-soft-lg hover:-translate-y-2 transition-all duration-300;
    }
    
    /* Modern Soft Buttons */
    .btn {
        @apply px-6 py-3 font-medium rounded-lg transition-all duration-200 ease-in-out;
    }
    
    .btn-primary {
        @apply btn bg-indigo-600 text-white hover:bg-indigo-700 shadow-md hover:shadow-lg;
    }
    
    .btn-secondary {
        @apply btn bg-white text-indigo-600 border border-indigo-200 hover:border-indigo-300 hover:bg-indigo-50 shadow-sm;
    }
    
    .btn-accent {
        @apply btn bg-gradient-to-r from-pink-500 to-rose-500 text-white hover:from-pink-600 hover:to-rose-600 shadow-md hover:shadow-lg;
    }
    
    .btn-yellow {
        @apply btn bg-amber-400 text-white hover:bg-amber-500 shadow-md hover:shadow-lg;
    }
    
    /* Modern Soft Forms */
    .form-input {
        @apply w-full px-4 py-3 bg-white text-gray-700 border border-gray-200 rounded-lg shadow-sm
        focus:outline-none focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all duration-200;
    }
    
    /* Modern Soft containers */
    .soft-box {
        @apply border border-gray-100 rounded-xl bg-white shadow-md relative overflow-hidden;
    }
    
    .soft-box-accent {
        @apply border border-indigo-100 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-md relative overflow-hidden;
    }
    
    .soft-box-amber {
        @apply border border-amber-100 rounded-xl bg-amber-400 text-white shadow-md relative overflow-hidden;
    }
    
    /* Soft gradient background */
    .bg-gradient-soft {
        background: linear-gradient(135deg, rgba(249,250,251,1) 0%, rgba(237,242,247,1) 100%);
    }
    
    /* Nav and header styles */
    .soft-nav {
        @apply bg-white shadow-soft;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    .soft-nav-link {
        @apply font-medium text-gray-700 hover:text-transparent hover:bg-clip-text hover:bg-gradient-to-r hover:from-indigo-600 hover:to-pink-500 px-4 py-2 transition-colors duration-200 relative;
    }
    
    .soft-nav-link::after {
        content: '';
        @apply absolute left-0 bottom-0 w-0 h-0.5 bg-indigo-600 transition-all duration-200;
    }
    
    .soft-nav-link:hover::after {
        @apply w-full;
    }
    
    /* Modern Soft typography */
    .soft-title {
        @apply font-sans text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600;
    }
    
    .soft-subtitle {
        @apply font-sans text-xl md:text-2xl font-semibold text-gray-700;
    }
    
    /* Animation classes */
    .animate-soft {
        transition: all 0.3s ease;
    }
    
    .animate-soft:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    /* Soft highlight */
    .soft-highlight {
        @apply bg-gradient-to-r from-indigo-500 to-purple-500 text-white px-2 py-1 rounded-md;
    }
    
    /* Custom section styles */
    .soft-section {
        @apply border-b border-gray-200 py-16;
    }
    
    /* Shadow Classes */
    .shadow-soft {
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    }
    
    .shadow-soft-lg {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
    }
    
    /* Glass Effect */
    .glass-effect {
        @apply bg-white bg-opacity-70 backdrop-blur-lg border border-white border-opacity-30 rounded-xl;
    }
    
    /* Enhanced map styling */
    #map {
        @apply rounded-xl overflow-hidden;
    }
    
    /* Fix Leaflet map borders */
    .leaflet-container {
        border: none !important;
        outline: none !important;
    }
    
    .leaflet-control-container .leaflet-control {
        border-radius: 8px !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
        border: 1px solid rgba(99, 102, 241, 0.2) !important;
    }
    
    /* Improved form fields focus effects */
    .form-input:focus {
        @apply ring-4 ring-indigo-100 border-indigo-500;
        box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
    }
    
    /* Button hover effects */
    .btn:hover {
        transform: translateY(-2px);
        transition: all 0.3s ease;
    }
}