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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-hotel-navy { background-color: #0A192F; }
    .bg-hotel-gold { background-color: #D4AF37; }
    .bg-hotel-sand { background-color: #F8F5F0; }
    
    .text-hotel-navy { color: #0A192F; }
    .text-hotel-gold { color: #D4AF37; }
    
    .border-hotel-gold { border-color: #D4AF37; }
    .border-hotel-navy { border-color: #0A192F; }
    
    .font-serif-hotel { font-family: 'Cinzel', serif; }
    
    .btn-hotel {
        @apply inline-flex items-center justify-center bg-[#D4AF37] text-white font-sans font-medium tracking-widest uppercase text-xs py-4 px-10 hover:bg-[#b5952f] transition-colors duration-300;
    }
    
    .btn-hotel-outline {
        @apply inline-flex items-center justify-center border border-[#D4AF37] text-[#D4AF37] font-sans font-medium tracking-widest uppercase text-xs py-4 px-10 hover:bg-[#D4AF37] hover:text-white transition-colors duration-300;
    }
    
    .nav-link {
        @apply text-white/80 hover:text-[#D4AF37] font-sans uppercase tracking-[0.2em] text-xs transition-colors duration-300;
    }
    .nav-link.active {
        @apply text-[#D4AF37];
    }
    
    .nav-link-dark {
        @apply text-[#0A192F]/80 hover:text-[#D4AF37] font-sans uppercase tracking-[0.2em] text-xs transition-colors duration-300;
    }
    .nav-link-dark.active {
        @apply text-[#D4AF37];
    }

    .room-card {
        @apply group relative overflow-hidden;
    }
    .room-img-container {
        @apply overflow-hidden h-[400px];
    }
    .room-img {
        @apply w-full h-full object-cover transition-transform duration-1000 group-hover:scale-110;
    }
    .room-content {
        @apply absolute bottom-0 left-0 w-full p-8 bg-gradient-to-t from-black/90 via-black/50 to-transparent text-white transform translate-y-8 group-hover:translate-y-0 transition-transform duration-500;
    }
}