:root {
            --soft-base: #FFE5AE;
            --vibrant-pink: #FF62A5;
            --deep-purple: #621295;
            --teal-accent: #048998;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--soft-base);
            color: var(--deep-purple);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .logo-font {
            font-family: 'Gravitas One', cursive;
        }

        /* Page Management */
        .page {
            display: none;
            opacity: 0;
            transition: opacity 0.6s ease-in-out;
        }
        .page.active {
            display: block;
            opacity: 1;
        }

        /* Animations */
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .hero-gradient {
            background: linear-gradient(-45deg, #621295, #FF62A5, #048998, #621295);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }

        /* Navigation Morph */
        header.scrolled {
            background-color: var(--deep-purple);
            padding: 0.75rem 2rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }

        /* Custom UI Elements */
        .tab-active {
            background-color: var(--vibrant-pink) !important;
            color: white !important;
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(255, 98, 165, 0.3);
        }

        .cart-panel {
            transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
            transform: translateX(100%);
        }
        .cart-panel.open { transform: translateX(0); }

        .food-card:hover .overlay { opacity: 1; }
        
        /* Modal Overlay */
        #modal-overlay {
            transition: opacity 0.3s ease;
            backdrop-filter: blur(8px);
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--soft-base); }
        ::-webkit-scrollbar-thumb { background: var(--deep-purple); border-radius: 5px; }

        .text-glow { text-shadow: 0 0 20px rgba(255, 98, 165, 0.5); }