/* Custom CSS Variables */
:root {
    --primary-bg: #ffffff;
    --secondary-bg: #f9fafb;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --accent-gold: #cd853f;  /* Peru */
    --accent-hover: #b07234;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--secondary-bg);
    color: var(--text-main);
}

/* Animations */
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-bounce-in { animation: bounceIn 0.8s ease-out forwards; }
@keyframes bounceIn { 
    0% { opacity: 0; transform: translateY(20px); } 
    50% { transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); } 
}

/* Cart Drawer */
#cart-drawer { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#cart-drawer.open { transform: translateX(0); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }

/* Input Focus */
input:focus {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 1px var(--accent-gold) !important;
}

/* Utility */
.hidden { display: none !important; }

:root {
    --accent-gold: #cd853f;
    --accent-dark: #b07234;
}

body { font-family: 'Inter', sans-serif; }

/* Animations */
.animate-pulse-slow { animation: pulse 3s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } }

.animate-bounce-slow { animation: bounce 2s infinite; }
@keyframes bounce { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-10px); } 
}

.animate-slide-up { animation: slideUp 0.5s ease-out forwards; }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Cart Drawer */
#cart-drawer.open { transform: translateX(0); }

/* Card Hover */
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-gold); }