:root {
    --brio-flame: #C6411C;
    --brio-black: #1E1E1C;
    --brio-cream: #F9F4F0;
    --brio-olive: #7B8145;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--brio-cream);
    color: var(--brio-black);
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brio-serif {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
}

.bg-brio-flame { background-color: var(--brio-flame); }
.text-brio-flame { color: var(--brio-flame); }
.bg-brio-black { background-color: var(--brio-black); }
.text-brio-black { color: var(--brio-black); }
.bg-brio-olive { background-color: var(--brio-olive); }
.text-brio-olive { color: var(--brio-olive); }
.bg-brio-cream { background-color: var(--brio-cream); }
.border-brio-flame { border-color: var(--brio-flame); }

/* Parallax Backgrounds */
.parallax-hero {
    background-image: linear-gradient(to bottom, rgba(249,244,240,0.85), rgba(249,244,240,1)), url('../images/LOGO%20FIRE.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: min(350px, 60vw);
}

.parallax-identity {
    background-image: linear-gradient(to right, rgba(30,30,28,0.92), rgba(30,30,28,0.85)), url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&q=80&w=2000');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Fix for iOS mobile devices where fixed background-attachment fails */
@media (hover: none) {
    .parallax-hero, .parallax-identity {
        background-attachment: scroll;
    }
}

.hero-pattern {
    background-image: radial-gradient(var(--brio-flame) 0.5px, transparent 0.5px);
    background-size: 32px 32px;
    opacity: 0.04;
}

.btn-hover {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(198, 65, 28, 0.4);
    filter: brightness(1.1);
}

.meal-card-img {
    transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
}
.group:hover .meal-card-img {
    transform: scale(1.08);
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231E1E1C'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.25rem center;
    background-size: 1rem;
    appearance: none;
}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}