/* Custom Styles */

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Color Scheme */
:root {
    --primary-color: #3B82F6; /* Blue-500 */
    --secondary-color: #1F2937; /* Gray-800 */
    --accent-color: #F59E0B; /* Amber-500 */
}

/* Apply the color scheme */
.bg-primary {
    background-color: var(--primary-color);
}

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

.text-accent {
    color: var(--accent-color);
}

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

.hover\:text-accent:hover {
    color: var(--accent-color);
}

/* Dark Mode */
.dark-mode {
    background-color: black; /* Pure Black */
    color: white; /* Pure White */
}

.dark-mode .bg-secondary {
    background-color: black; /* Pure Black */
}

.dark-mode .text-gray-800 {
    color: white; /* Pure White */
}

.dark-mode .text-gray-300 {
    color: white; /* Pure White */
}

.dark-mode .shadow-md {
    box-shadow: 0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06);
}

.dark-mode .bg-white {
    background-color: #374151; /* Gray-700 */
}

.dark-mode .text-white {
    color: white; /* Pure White */
}

/* Cart Styles */
#cart {
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
}

#cart.open {
    transform: translateX(0);
}

.dark-mode #cart {
    background-color: #111827; /* Gray-900 */
    color: #F9FAFB; /* Gray-50 */
}

.dark-mode #cart h2 {
    color: #F9FAFB; /* Gray-50 */
}

.dark-mode #cart .text-gray-600 {
    color: #D1D5DB; /* Gray-300 */
}

.dark-mode #cart .remove-from-cart-button {
    color: #EF4444; /* Red-500 */
}