/* AmaSwazi Bakes & Co. - Custom Styles */
/* This file will contain compiled Tailwind CSS + custom animations */

/* For now, we'll use Tailwind CDN in the HTML and add custom animations here */

/* Custom Tailwind theme variables */
:root {
    /* Soft Pastel Neutral Palette: Mocha, Pistachio, Strawberry, Milkshake, Vanilla, Cream */
    /* #A77864, #AAA257, #FC9584, #F6B7A8, #FEEEDF, #FFFCF5 */
    /* Primary: Strawberry (#FC9584) */
    --background: #FFFCF5;
    --foreground: #FC9584;
    --card: #ffffff;
    --card-foreground: #FC9584;
    --primary: #FC9584;
    --primary-foreground: #ffffff;
    --secondary: #F6B7A8;
    --secondary-foreground: #A77864;
    --muted: #FEEEDF;
    --muted-foreground: #A77864;
    --accent: #FC9584;
    --accent-dark: #A77864;
    --border: rgba(252, 149, 132, 0.3);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
}

/* Custom Animations for AmaSwazi Bakes & Co. */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(71, 29, 7, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(71, 29, 7, 0.5);
    }
}

@keyframes drift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bounce-slow {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Animation Classes */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

.animate-scale-in {
    animation: scaleIn 0.5s ease-out;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-glow {
    animation: glow 2s ease-in-out infinite;
}

.animate-drift {
    animation: drift 8s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spin-slow 20s linear infinite;
}

.animate-bounce-slow {
    animation: bounce-slow 4s ease-in-out infinite;
}

.animate-pulse-glow {
    animation: pulse-glow 3s ease-in-out infinite;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Utility Classes */
.text-muted-foreground {
    color: var(--muted-foreground);
}

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

/* Loading State */
.loading {
    opacity: 0.5;
    pointer-events: none;
}