/* Custom styles for E Nails */
:root {
    --midnight-900: #0a1628;
    --midnight-700: #1a2d45;
    --midnight-600: #2a3f5c;
    --midnight-400: #4a627a;
    --midnight-200: #a8b5c4;
    --midnight-100: #d4dce5;
    --mint-600: #34d399;
    --mint-400: #6ee7b7;
    --mint-300: #a7f3d0;
    --mint-200: #d1fae5;
    --mint-100: #ecfdf5;
    --mint-50: #f0fdf4;
}

html {
    scroll-behavior: smooth;
}

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

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
}

/* Custom color utilities */
.bg-midnight-900 { background-color: var(--midnight-900); }
.bg-midnight-700 { background-color: var(--midnight-700); }
.bg-mint-600 { background-color: var(--mint-600); }
.bg-mint-400 { background-color: var(--mint-400); }
.bg-mint-300 { background-color: var(--mint-300); }
.bg-mint-200 { background-color: var(--mint-200); }
.bg-mint-100 { background-color: var(--mint-100); }
.bg-mint-50 { background-color: var(--mint-50); }

.text-midnight-900 { color: var(--midnight-900); }
.text-midnight-700 { color: var(--midnight-700); }
.text-midnight-600 { color: var(--midnight-600); }
.text-mint-600 { color: var(--mint-600); }
.text-mint-400 { color: var(--mint-400); }
.text-mint-300 { color: var(--mint-300); }
.text-mint-200 { color: var(--mint-200); }
.text-mint-100 { color: var(--mint-100); }

/* Navbar scroll effect */
.navbar-scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Animation classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

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

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

/* Form focus styles */
input:focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}