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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-kid-primary { background-color: #FFF9F5; } /* Soft cream */
    .bg-kid-dark { background-color: #5D536B; } /* Soft purple-grey */
    .bg-kid-accent { background-color: #FF9B85; } /* Playful peach/coral */
    .bg-kid-light { background-color: #FFD4CA; }
    .bg-kid-blue { background-color: #98D2EB; } /* Soft blue */
    .bg-kid-yellow { background-color: #FFE66D; } /* Soft yellow */
    
    .text-kid-primary { color: #5D536B; }
    .text-kid-accent { color: #FF9B85; }
    .text-kid-muted { color: #8A8198; }
    
    .border-kid-accent { border-color: #FF9B85; }
    .border-kid-dark { border-color: #5D536B; }
    
    .font-fredoka { font-family: 'Fredoka', sans-serif; }
    .font-quicksand { font-family: 'Quicksand', sans-serif; }
    
    .btn-kid {
        @apply inline-flex items-center justify-center bg-[#FF9B85] text-white font-fredoka text-lg font-medium py-3 px-8 rounded-full shadow-[0_4px_0_#E57E69] hover:bg-[#E57E69] hover:shadow-[0_2px_0_#C56653] hover:translate-y-[2px] transition-all duration-200;
    }
    
    .btn-kid-outline {
        @apply inline-flex items-center justify-center border-2 border-[#5D536B] text-[#5D536B] font-fredoka text-lg font-medium py-3 px-8 rounded-full hover:bg-[#5D536B] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-[#5D536B] hover:text-[#FF9B85] font-fredoka text-lg font-medium transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1 left-1/2 w-0 h-1 bg-[#FF9B85] rounded-full transition-all duration-300 -translate-x-1/2;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-[20px];
    }
    
    .nav-link.active {
        @apply text-[#FF9B85];
    }
}

.cloud-border {
    position: relative;
}

.cloud-border::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF9F5' fill-opacity='1' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    z-index: 10;
}

.product-card {
    @apply relative bg-white rounded-3xl p-4 transition-all duration-300 border-2 border-transparent hover:border-[#FFD4CA] hover:shadow-xl hover:-translate-y-2;
}

.product-img-wrapper {
    @apply relative overflow-hidden rounded-2xl bg-gray-50 aspect-[4/5] mb-4;
}

.product-img-wrapper img {
    @apply w-full h-full object-cover transition-transform duration-500 hover:scale-110;
}

.badge-new {
    @apply absolute top-3 left-3 bg-[#FFE66D] text-[#5D536B] font-fredoka text-xs font-bold px-3 py-1 rounded-full z-10;
}

.product-add {
    @apply w-10 h-10 rounded-full bg-[#FF9B85] text-white flex items-center justify-center hover:bg-[#E57E69] transition-colors shadow-md;
}