/* Custom Styles for Corner Inn */

:root {
    --terracotta-50: #fef7f4;
    --terracotta-100: #fdecd8;
    --terracotta-200: #fad4b0;
    --terracotta-300: #f6b47e;
    --terracotta-400: #f08d4a;
    --terracotta-500: #e86535;
    --terracotta-600: #c2704e;
    --terracotta-700: #9a553d;
    --terracotta-800: #7d4536;
    --terracotta-900: #663a2f;
    
    --sand-50: #faf8f5;
    --sand-100: #f5f0e8;
    --sand-200: #e8ddd0;
    --sand-300: #d4c4b0;
    --sand-400: #bfa88e;
    --sand-500: #a89070;
    --sand-600: #8a7458;
    --sand-700: #6e5c46;
    --sand-800: #5a4a3a;
    --sand-900: #4a3d30;
}

/* Tailwind Config */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Tailwind Theme */
@layer base {
    body {
        font-family: 'Inter', sans-serif;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Playfair Display', serif;
    }
}

@layer utilities {
    .text-terracotta-50 { color: var(--terracotta-50); }
    .text-terracotta-100 { color: var(--terracotta-100); }
    .text-terracotta-200 { color: var(--terracotta-200); }
    .text-terracotta-300 { color: var(--terracotta-300); }
    .text-terracotta-400 { color: var(--terracotta-400); }
    .text-terracotta-500 { color: var(--terracotta-500); }
    .text-terracotta-600 { color: var(--terracotta-600); }
    .text-terracotta-700 { color: var(--terracotta-700); }
    .text-terracotta-800 { color: var(--terracotta-800); }
    .text-terracotta-900 { color: var(--terracotta-900); }
    
    .bg-terracotta-50 { background-color: var(--terracotta-50); }
    .bg-terracotta-100 { background-color: var(--terracotta-100); }
    .bg-terracotta-200 { background-color: var(--terracotta-200); }
    .bg-terracotta-300 { background-color: var(--terracotta-300); }
    .bg-terracotta-400 { background-color: var(--terracotta-400); }
    .bg-terracotta-500 { background-color: var(--terracotta-500); }
    .bg-terracotta-600 { background-color: var(--terracotta-600); }
    .bg-terracotta-700 { background-color: var(--terracotta-700); }
    .bg-terracotta-800 { background-color: var(--terracotta-800); }
    .bg-terracotta-900 { background-color: var(--terracotta-900); }
    
    .text-sand-50 { color: var(--sand-50); }
    .text-sand-100 { color: var(--sand-100); }
    .text-sand-200 { color: var(--sand-200); }
    .text-sand-300 { color: var(--sand-300); }
    .text-sand-400 { color: var(--sand-400); }
    .text-sand-500 { color: var(--sand-500); }
    .text-sand-600 { color: var(--sand-600); }
    .text-sand-700 { color: var(--sand-700); }
    .text-sand-800 { color: var(--sand-800); }
    .text-sand-900 { color: var(--sand-900); }
    
    .bg-sand-50 { background-color: var(--sand-50); }
    .bg-sand-100 { background-color: var(--sand-100); }
    .bg-sand-200 { background-color: var(--sand-200); }
    .bg-sand-300 { background-color: var(--sand-300); }
    .bg-sand-400 { background-color: var(--sand-400); }
    .bg-sand-500 { background-color: var(--sand-500); }
    .bg-sand-600 { background-color: var(--sand-600); }
    .bg-sand-700 { background-color: var(--sand-700); }
    .bg-sand-800 { background-color: var(--sand-800); }
    .bg-sand-900 { background-color: var(--sand-900); }
}

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

/* Navbar Scroll Effect */
#navbar {
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

#navbar.scrolled .text-terracotta-600 {
    color: var(--terracotta-600) !important;
}

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

::-webkit-scrollbar-track {
    background: var(--sand-100);
}

::-webkit-scrollbar-thumb {
    background: var(--terracotta-400);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--terracotta-500);
}

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

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

/* Focus States */
input:focus,
textarea:focus,
button:focus {
    outline: none;
}

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

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