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

/* Modern theme: teal / cyan (hospitality) */
:root {
    --primary-blue: #0d9488;
    --primary-dark: #0f766e;
    --primary-light: #2dd4bf;
    --accent-indigo: #0891b2;
    --success-green: #10b981;
    --warning-yellow: #f59e0b;
    --error-red: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
}

/* Modern gradient backgrounds */
.modern-gradient-primary {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
}

.modern-gradient-soft {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
}

.modern-gradient-dark {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

/* Modern shadow effects */
.modern-shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.modern-shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modern-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.modern-shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.modern-shadow-hover:hover {
    box-shadow: 0 20px 25px -5px rgba(13, 148, 136, 0.1), 0 10px 10px -5px rgba(13, 148, 136, 0.04);
}

/* Modern buttons */
.btn-modern-primary {
    @apply bg-teal-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-teal-700 hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2;
}

.btn-modern-secondary {
    @apply bg-gray-200 text-gray-800 font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-gray-300 hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.btn-modern-outline {
    @apply border-2 border-teal-600 text-teal-700 font-semibold py-3 px-6 rounded-lg hover:bg-teal-50 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2;
}

.btn-modern-success {
    @apply bg-green-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-green-700 hover:shadow-lg transition-all duration-300;
}

/* Modern card styles */
.modern-card {
    @apply bg-white rounded-xl shadow-md hover:shadow-xl transition-shadow duration-300 border border-gray-100;
}

.modern-card-elevated {
    @apply bg-white rounded-xl shadow-lg border border-gray-200;
}

/* Modern badges */
.badge-modern {
    @apply px-3 py-1 bg-teal-100 text-teal-900 text-xs font-semibold rounded-full;
}

.badge-modern-success {
    @apply px-3 py-1 bg-green-100 text-green-800 text-xs font-semibold rounded-full;
}

.badge-modern-warning {
    @apply px-3 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full;
}

.badge-modern-error {
    @apply px-3 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full;
}

.badge-modern-outline {
    @apply px-3 py-1 border border-gray-200 text-gray-700 text-xs font-semibold rounded-full;
}

/* Featured card */
.modern-card-featured {
    @apply bg-white rounded-xl shadow-lg border-2 border-teal-100 hover:shadow-xl transition-shadow duration-300;
}

/* Modern input styles */
.input-modern {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-teal-500 focus:ring-2 focus:ring-teal-100 transition-all bg-white;
}

.input-modern:focus {
    outline: none;
}

/* Modern animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

/* Custom scrollbar - modern theme */
.modern-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.modern-scrollbar::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.modern-scrollbar::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

.modern-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Loading spinner - modern */
.spinner-modern {
    border: 3px solid #e5e7eb;
    border-top: 3px solid #0d9488;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Modern hover effects */
.modern-hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Modern text gradients */
.text-modern-gradient {
    background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Price tag modern style */
.price-tag-modern {
    @apply inline-flex items-center bg-teal-600 text-white px-4 py-2 rounded-lg font-bold text-lg shadow-md;
}

/* Section divider modern */
.modern-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #e5e7eb 50%, transparent 100%);
    margin: 2rem 0;
}

/* Focus states */
.focus-modern:focus {
    @apply outline-none ring-2 ring-teal-500 ring-offset-2;
}

/* Disabled state */
.disabled-modern {
    @apply opacity-50 cursor-not-allowed;
}

/* Glass morphism effect */
.glass-modern {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive utilities */
@media (max-width: 768px) {
    .btn-modern-primary,
    .btn-modern-secondary,
    .btn-modern-outline {
        @apply py-2 px-4 text-sm;
    }
}

/* Success state */
.success-modern {
    @apply bg-green-50 border-l-4 border-green-500 p-4 rounded;
}

/* Error state */
.error-modern {
    @apply bg-red-50 border-l-4 border-red-500 p-4 rounded;
}

/* Info state */
.info-modern {
    @apply bg-teal-50 border-l-4 border-teal-500 p-4 rounded;
}

/* Warning state */
.warning-modern {
    @apply bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded;
}