/* Custom Styles for The Well Coffeehouse */

:root {
    --charcoal: #2C2C2C;
    --charcoal-light: #3D3D3D;
    --coral: #F4845F;
    --coral-light: #F7A08A;
    --coral-dark: #E06B45;
    --stone-50: #FAFAF9;
    --stone-100: #F5F5F4;
    --stone-200: #E7E5E4;
    --stone-600: #575553;
}

/* Tailwind Config Extension */
tailwind.config = {
    theme: {
        extend: {
            colors: {
                charcoal: {
                    DEFAULT: '#2C2C2C',
                    light: '#3D3D3D',
                },
                coral: {
                    50: '#FFF5F0',
                    100: '#FEE8DF',
                    200: '#FDD0BE',
                    300: '#FBB08E',
                    400: '#F8855A',
                    500: '#F4845F',
                    600: '#E06B45',
                    700: '#C45230',
                }
            },
            fontFamily: {
                serif: ['"DM Serif Display"', 'Georgia', 'serif'],
                sans: ['"Outfit"', 'system-ui', 'sans-serif'],
            }
        }
    }
}

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

/* Custom Animations */
@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;
}

/* Navbar Scroll Effect */
.navbar-scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #F4845F;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #E06B45;
}

/* Input Focus Styles */
input:focus,
textarea:focus {
    border-color: #F4845F !important;
    box-shadow: 0 0 0 3px rgba(244, 132, 95, 0.2) !important;
}

/* Image Hover Effect */
img {
    transition: transform 0.5s ease;
}

/* Selection Color */
::selection {
    background: #F4845F;
    color: white;
}

/* Mobile Menu Animation */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

#mobile-menu.open {
    max-height: 400px;
}

/* Fade In Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.8s ease forwards;
}

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }