/* Custom styles for Island Nails & Spa */

:root {
    --burgundy-900: #4a0404;
    --burgundy-800: #5c0a0a;
    --burgundy-700: #6b1212;
    --burgundy-600: #7d1a1a;
    --burgundy-400: #a83232;
    --rose-500: #f43f5e;
    --rose-400: #fb7185;
    --rose-300: #fda4af;
    --rose-200: #fecdd3;
    --rose-100: #ffe4e6;
    --rose-50: #fff1f2;
}

body {
    font-family: 'Montserrat', sans-serif;
}

.font-cormorant {
    font-family: 'Cormorant Garamond', serif;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

/* Custom color classes */
.text-burgundy-900 { color: var(--burgundy-900); }
.text-burgundy-800 { color: var(--burgundy-800); }
.text-burgundy-700 { color: var(--burgundy-700); }
.text-burgundy-600 { color: var(--burgundy-600); }
.text-burgundy-400 { color: var(--burgundy-400); }
.bg-burgundy-900 { background-color: var(--burgundy-900); }
.bg-burgundy-800 { background-color: var(--burgundy-800); }
.bg-burgundy-700 { background-color: var(--burgundy-700); }
.bg-burgundy-600 { background-color: var(--burgundy-600); }
.bg-burgundy-400 { background-color: var(--burgundy-400); }
.border-burgundy-200 { border-color: var(--rose-200); }

/* Blob animation */
@keyframes blob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--rose-50);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--rose-400), var(--burgundy-600));
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, var(--rose-500), var(--burgundy-700));
}

/* Hover effects */
.group:hover .group-hover\\:scale-110 {
    transform: scale(1.1);
}

/* Focus styles */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.2);
}

/* Mobile menu transitions */
#mobile-menu {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .font-cormorant {
        font-size: 2.5rem;
    }
    
    .font-cormorant.text-4xl {
        font-size: 2rem;
    }
}