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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-sleep-blue { background-color: #1e3a8a; }
    .bg-cloud-white { background-color: #f8fafc; }
    .bg-comfort-gold { background-color: #f59e0b; }
    
    .text-sleep-blue { color: #1e3a8a; }
    .text-comfort-gold { color: #f59e0b; }
    
    .font-outfit { font-family: 'Outfit', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
    
    .btn-mattress {
        @apply inline-flex items-center justify-center bg-[#1e3a8a] text-white font-outfit text-sm font-medium py-3.5 px-8 rounded-full hover:bg-[#152b69] transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5;
    }
    
    .btn-mattress-outline {
        @apply inline-flex items-center justify-center border-2 border-[#1e3a8a] text-[#1e3a8a] font-outfit text-sm font-medium py-3.5 px-8 rounded-full hover:bg-[#1e3a8a] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-slate-600 hover:text-[#1e3a8a] font-outfit text-sm font-medium transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1.5 left-0 w-0 h-0.5 bg-[#f59e0b] transition-all duration-300 rounded-full;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#1e3a8a];
    }
}

/* Soft floating animation for mattress images */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}