@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;800&display=swap');

:root {
    --color-cream: #FFFDF7;
    /* Warm, tasty background */
    --color-brown: #4E342E;
    /* Rich chocolate brown */
    --color-orange: #FF6F00;
    /* Energetic, hungry orange */
    --color-pink: #FF4081;
    /* Playful, sweet pink */
    --color-gold: #FFC107;
    /* Premium gold */
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--color-cream);
    color: var(--color-brown);
}

/* Brand Colors Utilities */
.text-brand-brown {
    color: var(--color-brown);
}

.bg-brand-brown {
    background-color: var(--color-brown);
}

.text-brand-orange {
    color: var(--color-orange);
}

.bg-brand-orange {
    background-color: var(--color-orange);
}

.text-brand-pink {
    color: var(--color-pink);
}

.bg-brand-pink {
    background-color: var(--color-pink);
}

.text-brand-gold {
    color: var(--color-gold);
}

.bg-brand-gold {
    background-color: var(--color-gold);
}

.bg-brand-cream {
    background-color: var(--color-cream);
}

/* Smooth Fade */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cookie-card:hover {
    transform: translateY(-5px);
}