:root {
            --bg: #FFFFFF;
            --text: #000000;
            --secondary: #1F1F1F;
            --accent: #2B2B2B;
            --surface: #F5F5F5;
            --border: #E5E5E5;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg);
            color: var(--text);
            scroll-behavior: smooth;
        }

        .serif { font-family: 'Playfair Display', serif; }
        .serif-alt { font-family: 'Libre Baskerville', serif; }

        /* Smooth Reveal System */
        .reveal { 
            opacity: 0; 
            transform: translateY(30px); 
            transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1); 
        }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        /* Hover Glows & Transitions */
        .hover-lift { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        .hover-lift:hover { transform: translateY(-10px); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 3px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #000; }

        /* Navigation Underline */
        .nav-link {
            position: relative;
            font-size: 10px;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            font-weight: 500;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px; left: 0;
            width: 0; height: 1px;
            background: black;
            transition: width 0.4s ease;
        }
        .nav-link:hover::after { width: 100%; }

        /* Modal Overlays */
        .overlay {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(12px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease;
        }
        .overlay.active { opacity: 1; visibility: visible; }

        /* Sidebar Styling */
        .sidebar {
            transform: translateX(100%);
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .sidebar.active { transform: translateX(0); }

        .recipe-image-container {
            overflow: hidden;
            background: #f9f9f9;
        }
        .recipe-image-container img {
            transition: transform 1.5s cubic-bezier(0.2, 1, 0.3, 1);
        }
        .recipe-card:hover .recipe-image-container img {
            transform: scale(1.08);
        }

        .category-dot {
            height: 6px;
            width: 6px;
            background: #000;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }