newstyles.css

<style>
.theme-dark-luxe {
    --color-primary: #1a1a1a;
    --color-secondary: #f5f5f5;
    --color-accent: #2a2a2a;
    --color-light: #f8f8f8;
    --color-dark: #0d0d0d;
}

@media (prefers-color-scheme: dark) {
    html:not(.theme-light) {
        @apply theme-dark-luxe;
    }
}

/* Mobile-first responsive breakpoints */
@screen sm {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@screen md {
    .product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Contrast checks */
.theme-dark-luxe {
    color-scheme: dark;
    --text-primary: var(--color-secondary);
    --text-secondary: var(--color-primary);
    --bg-primary: var(--color-dark);
    --bg-secondary: var(--color-accent);
}

/* Quick buy flow animations */
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.quick-buy-slide {
    animation: slideIn 0.3s ease-out forwards;
}

.success-toast {
    animation: fadeInOut 2.5s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateY(20px); }
    20% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-20px); }
}
</style>