/* Define Custom Colors and Fonts */
        :root {
            --color-ivory: #FAF7F2;
            --color-olive: #3F4E3A;
            --color-orange: #E56B2F;
            --color-charcoal: #2B2B2B;
            --color-beige: #EDE7DF;
        }
        .bg-ivory { background-color: var(--color-ivory); }
        .text-charcoal { color: var(--color-charcoal); }
        .text-olive { color: var(--color-olive); }
        .text-orange { color: var(--color-orange); }
        .bg-beige { background-color: var(--color-beige); }

        .font-serif-elegant { font-family: 'Playfair Display', serif; }
        .font-sans-minimal { font-family: 'DM Sans', sans-serif; }

        /* Custom gradient for buttons */
        .btn-gradient {
            background-image: linear-gradient(135deg, var(--color-olive), var(--color-orange));
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            background-image: linear-gradient(135deg, var(--color-orange), var(--color-olive));
            box-shadow: 0 8px 15px rgba(229, 107, 47, 0.4);
        }
        
        /* Smooth Fade-in Scroll Reveal */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .scroll-reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Hero Parallax Effect */
        #hero-bg {
            background-image: url('https://i.pinimg.com/736x/b2/5b/0e/b25b0e5b3b095bfcb28d6c5e417b7885.jpg');
            background-attachment: fixed;
            background-position: center top;
            background-size: cover;
        }
        
        /* Recipe Step Progress Bar */
        #progress-bar {
            height: 4px;
            background-color: var(--color-orange);
            width: 0%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 50;
            transition: width 0.1s linear;
        }

        /* Set base styles using Tailwind classes */
        body {
            @apply bg-ivory text-charcoal font-sans-minimal;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        h1, h2, h3, h4, .title-text {
            @apply font-serif-elegant font-bold;
        }