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

html { scroll-behavior: smooth; background-color: #0A0A0A; }

@layer utilities {
    .bg-barber-dark { background-color: #0A0A0A; }
    .bg-barber-gray { background-color: #171717; }
    .bg-barber-gold { background-color: #D4AF37; }
    
    .text-barber-gold { color: #D4AF37; }
    .text-barber-light { color: #FAFAFA; }
    .text-barber-muted { color: #A3A3A3; }
    
    .border-barber-gold { border-color: #D4AF37; }
    .border-barber-gray { border-color: #262626; }
    
    .font-oswald { font-family: 'Oswald', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
}

/* Barber Pole Animation */
.barber-pole {
    background: repeating-linear-gradient(
        -45deg,
        #dc2626,
        #dc2626 20px,
        #ffffff 20px,
        #ffffff 40px,
        #2563eb 40px,
        #2563eb 60px,
        #ffffff 60px,
        #ffffff 80px
    );
    background-size: 200% 200%;
    animation: poleScroll 3s linear infinite;
}

@keyframes poleScroll {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

.barber-btn {
    @apply inline-flex items-center justify-center px-10 py-4 bg-transparent border-2 border-[#D4AF37] text-[#D4AF37] font-oswald font-medium uppercase tracking-widest hover:bg-[#D4AF37] hover:text-[#0A0A0A] transition-all duration-300;
}

.barber-btn-solid {
    @apply inline-flex items-center justify-center px-10 py-4 bg-[#D4AF37] text-[#0A0A0A] font-oswald font-medium uppercase tracking-widest hover:bg-white hover:text-[#0A0A0A] transition-all duration-300 shadow-[0_0_15px_rgba(212,175,55,0.3)];
}

.service-item {
    @apply flex justify-between items-end border-b border-[#262626] pb-4 group cursor-pointer;
}

.service-item:hover {
    @apply border-[#D4AF37];
}

.vintage-overlay {
    background: linear-gradient(rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.95)), 
                url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
}