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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-paint-primary { background-color: #2563EB; } /* Vibrant Blue */
    .bg-paint-secondary { background-color: #F59E0B; } /* Vibrant Yellow/Orange */
    .bg-paint-light { background-color: #F8FAFC; }
    .bg-paint-dark { background-color: #0F172A; }
    
    .text-paint-primary { color: #2563EB; }
    .text-paint-secondary { color: #F59E0B; }
    .text-paint-dark { color: #0F172A; }
    
    .font-outfit { font-family: 'Outfit', sans-serif; }
}

body {
    font-family: 'Outfit', sans-serif;
    color: #334155;
    background-color: #FFFFFF;
}

.paint-btn {
    @apply inline-flex items-center justify-center px-8 py-3 bg-[#2563EB] text-white font-semibold rounded-full hover:bg-[#1D4ED8] transition-all duration-300 shadow-[0_10px_25px_-5px_rgba(37,99,235,0.4)] hover:shadow-[0_15px_35px_-5px_rgba(37,99,235,0.5)] transform hover:-translate-y-1;
}

.paint-btn-outline {
    @apply inline-flex items-center justify-center px-8 py-3 border-2 border-[#2563EB] text-[#2563EB] font-semibold rounded-full hover:bg-[#2563EB] hover:text-white transition-all duration-300;
}

/* Paint drip effect or brush stroke mask */
.brush-stroke {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 Q50,10 100,0 L100,100 Q50,90 0,100 Z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 100 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 Q50,10 100,0 L100,100 Q50,90 0,100 Z' /%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.color-swatch {
    @apply w-12 h-12 rounded-full shadow-inner border-2 border-white transform transition-transform duration-300 hover:scale-110 cursor-pointer;
}

/* Animated paint roller loading style */
.roller-line {
    position: relative;
    overflow: hidden;
}

.roller-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2563EB;
    transform: translateX(-100%);
    transition: transform 0.5s ease-out;
}

.group:hover .roller-line::after {
    transform: translateX(0);
}