@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-cos-nude { background-color: #F7EBE8; }
    .bg-cos-rose { background-color: #592B31; }
    .bg-cos-blush { background-color: #EAC9C1; }
    
    .text-cos-nude { color: #F7EBE8; }
    .text-cos-rose { color: #592B31; }
    .text-cos-blush { color: #EAC9C1; }
    
    .border-cos-rose { border-color: #592B31; }
    
    .font-serif-cos { font-family: 'Playfair Display', serif; }
    
    .btn-cos {
        @apply inline-flex items-center justify-center bg-[#592B31] text-[#F7EBE8] font-sans font-medium uppercase tracking-widest text-xs py-4 px-10 hover:bg-[#3d1d22] transition-colors duration-300;
    }
    
    .btn-cos-outline {
        @apply inline-flex items-center justify-center border border-[#592B31] text-[#592B31] font-sans font-medium uppercase tracking-widest text-xs py-4 px-10 hover:bg-[#592B31] hover:text-[#F7EBE8] transition-colors duration-300;
    }
    
    .nav-link {
        @apply text-[#592B31] hover:opacity-60 font-sans uppercase tracking-widest text-xs transition-opacity duration-300;
    }
    .nav-link.active {
        @apply border-b border-[#592B31] pb-1;
    }

    .product-card {
        @apply group cursor-pointer text-center;
    }
    .product-img-wrapper {
        @apply relative overflow-hidden bg-[#F7EBE8] aspect-[3/4] mb-4 flex items-center justify-center;
    }
    .product-img {
        @apply object-cover mix-blend-multiply transition-transform duration-700 group-hover:scale-105;
    }
    .product-badge {
        @apply absolute top-4 left-4 bg-white text-[#592B31] text-[10px] uppercase tracking-widest px-2 py-1;
    }
    .product-action {
        @apply absolute bottom-0 left-0 w-full bg-[#592B31] text-white py-3 text-xs uppercase tracking-widest translate-y-full group-hover:translate-y-0 transition-transform duration-300;
    }
}