:root {
    --brand-orange: #F08262;
    --brand-orange-dark: #d96a4a;
    --brand-orange-light: #FFF3EF;
    --brand-yellow: #FFE900;
    --brand-yellow-dark: #E6CE00;
    --brand-yellow-light: #FFFDE6;
    --brand-amber: #D97706;
    --brand-amber-dark: #B45309;
    --brand-green: #FFE900;
    --brand-green-dark: #E6CE00;
    --brand-green-light: #FFFDE6;
    --brand-whatsapp: #25D366;
    --brand-whatsapp-dark: #1EBE5D;
    --brand-dark: #1E2833;
    --brand-gray: #64748B;
    --brand-cream: #FAF8F5;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--brand-cream);
    color: var(--brand-dark);
    overflow-x: hidden;
}

h1, h2, h3, .font-display {
    font-family: 'Fredoka', cursive;
}

/* Utility Colors (Yellow & Orange Palette) */
.bg-brand-yellow { background-color: var(--brand-yellow); }
.bg-brand-yellow-dark { background-color: var(--brand-yellow-dark); }
.bg-brand-yellow-light { background-color: var(--brand-yellow-light); }
.bg-brand-green { background-color: var(--brand-yellow); }
.bg-brand-green-dark { background-color: var(--brand-yellow-dark); }
.bg-brand-green-light { background-color: var(--brand-yellow-light); }
.bg-brand-orange { background-color: var(--brand-orange); }
.bg-brand-orange-dark { background-color: var(--brand-orange-dark); }
.bg-brand-orange-light { background-color: var(--brand-orange-light); }
.bg-brand-cream { background-color: var(--brand-cream); }
.bg-brand-dark { background-color: var(--brand-dark); }

.text-brand-yellow { color: var(--brand-amber); }
.text-brand-yellow-dark { color: var(--brand-amber-dark); }
.text-brand-yellow-light { color: var(--brand-yellow-light); }
.text-brand-green { color: var(--brand-amber); }
.text-brand-green-dark { color: var(--brand-amber-dark); }
.text-brand-green-light { color: var(--brand-yellow-light); }
.text-brand-orange { color: var(--brand-orange); }
.text-brand-orange-dark { color: var(--brand-orange-dark); }
.text-brand-orange-light { color: var(--brand-orange-light); }
.text-brand-dark { color: var(--brand-dark); }
.text-brand-gray { color: var(--brand-gray); }

.border-brand-yellow { border-color: var(--brand-yellow); }
.border-brand-green { border-color: var(--brand-yellow); }
.border-brand-orange { border-color: var(--brand-orange); }

/* Subtle floating animations for decorative icons */
@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(5deg); }
}
@keyframes float-reverse {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(10px) rotate(-6deg); }
}
@keyframes pulse-soft {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.animate-float-1 { animation: float-slow 5s ease-in-out infinite; }
.animate-float-2 { animation: float-reverse 6s ease-in-out infinite; }
.animate-pulse-soft { animation: pulse-soft 3s ease-in-out infinite; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FAF8F5; }
::-webkit-scrollbar-thumb { background: #F08262; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #d96a4a; }

/* Clean Button Shadows (No glowing auras) */
.glow-orange,
.glow-yellow,
.glow-whatsapp,
.glow-green {
    box-shadow: none;
}

/* Glassmorphic elements */
.glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* Logo enhancement on colored backgrounds */
.logo-glow {
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}

/* Reference Wave & Organic Shapes */
.hero-wave-header {
    background: #FFE900;
    background: linear-gradient(135deg, #FFE900 0%, #F5DE00 50%, #E6CE00 100%);
}

.hero-blob-orange {
    background: linear-gradient(135deg, #F08262 0%, #E36D4C 100%);
    border-radius: 60% 40% 48% 52% / 54% 46% 54% 46%;
}

.hero-blob-outline {
    border: 3px solid rgba(240, 130, 98, 0.45);
    border-radius: 64% 36% 50% 50% / 52% 48% 52% 48%;
}

/* Doodle Animations */
@keyframes doodle-wiggle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-8deg) scale(1.05); }
    75% { transform: rotate(8deg) scale(0.95); }
}

.animate-doodle {
    animation: doodle-wiggle 4s ease-in-out infinite;
}

/* Infinite Marquee Ticker Animation */
@keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 75s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}