:root {
    --color-primary: #E91E63;
    --color-primary-hover: #D81B60;
    --color-secondary: #FFC107;
    --color-accent: #D946EF;
    --color-dark: #1f2937;
    --color-darker: #111827;
    --color-text: #f9fafb;
    --color-text-secondary: #9ca3af;
    --color-border: #374151;
}


.theme-transition,
.theme-transition * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}


.light-mode {
    --color-primary: #9333EA;
    --color-primary-hover: #7C3AED;
    --color-secondary: #FCD34D;
    --color-accent: #A855F7;
    --color-dark: #f3f4f6;
    --color-darker: #ffffff;
    --color-text: #111827;
    --color-text-secondary: #4b5563;
    --color-border: #e5e7eb;
}

.light-mode body {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
    color: var(--color-text);
}

.light-mode #navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--color-border);
}

.light-mode .glass {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--color-border);
}

.light-mode .product-card,
.light-mode .mode-card {
    background: var(--color-darker);
    border: 2px solid var(--color-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.light-mode .mode-card {
    border: 2px solid var(--color-border);
}

.light-mode .mode-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.2);
}

.light-mode .btn-outline {
    border-color: var(--color-border);
    color: var(--color-text);
}

.light-mode .mode-card .btn-outline {
    color: #ffffff;
    border-color: #9333EA;
}

.light-mode .mode-card .btn-outline:hover {
    background: #9333EA;
    color: #ffffff;
    border-color: #9333EA;
}

.light-mode .btn-outline:hover {
    background: var(--color-dark);
}

.light-mode input,
.light-mode textarea,
.light-mode select {
    background: var(--color-darker);
    border-color: var(--color-border);
    color: var(--color-text);
}

.light-mode .modal-content {
    background: var(--color-darker);
    border: 1px solid var(--color-border);
}

.light-mode .toast {
    background: var(--color-darker);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

.light-mode .footer {
    background: var(--color-dark);
    border-top: 1px solid var(--color-border);
}

.light-mode #cartSidebar {
    background: var(--color-darker);
}

.light-mode .hero-section {
    background: linear-gradient(135deg, #f9fafb 0%, #e5e7eb 100%);
}

.light-mode .hero-bg:after {
    background: linear-gradient(135deg, rgba(249, 250, 251, 0.9), rgba(229, 231, 235, 0.9));
}


.light-mode .text-gray-300,
.light-mode .text-gray-400,
.light-mode .text-gray-500 {
    color: var(--color-text-secondary) !important;
}

.light-mode .text-white {
    color: var(--color-text) !important;
}


.light-mode .mode-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
}

.light-mode .mode-card > div:first-child {
    background: #f3f4f6;
}

.light-mode .mode-card > div:last-child {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.light-mode .mode-card h3 {
    color: #ffffff;
}

.light-mode .mode-card p {
    color: #d1d5db;
}


.light-mode #navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.light-mode .nav-link {
    color: var(--color-text-secondary);
}

.light-mode .nav-link:hover,
.light-mode .nav-link.active {
    color: var(--color-primary);
}


.light-mode .discord-widget h3 {
    color: var(--color-primary) !important;
}

.light-mode .discord-widget .text-gray-400 {
    color: #6b7280 !important;
}


#darkModeToggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

#darkModeToggle:hover {
    transform: scale(1.1);
}

#darkModeToggle:active {
    transform: scale(0.95);
}


@media print {
    body {
        background: white !important;
        color: black !important;
    }
    
    .glass,
    .product-card,
    .mode-card {
        background: white !important;
        border: 1px solid #ddd !important;
    }
}