/* NoxDigi — Light-first design tokens */

:root {
    --surface-base: #f8fafc;
    --surface-raised: #ffffff;
    --text-primary: #334155;
    --text-muted: #64748b;
    --accent: #6366f1;
    --border-subtle: #e2e8f0;
}

html.dark {
    --surface-base: #020617;
    --surface-raised: #0f172a;
    --text-primary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-subtle: rgba(255, 255, 255, 0.08);
}

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

/* Floating theme toggle — hidden until hovered */
.theme-toggle-wrap {
    opacity: 0.12;
    transition: opacity 0.25s ease;
}
.theme-toggle-wrap:hover,
.theme-toggle-wrap:focus-within {
    opacity: 1;
}

html.dark .theme-icon-light { display: none; }
html.dark .theme-icon-dark { display: block !important; }
html:not(.dark) .theme-icon-dark { display: none; }
html:not(.dark) .theme-icon-light { display: block; }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

@keyframes progress-bar {
    from { width: 0%; }
    to { width: 100%; }
}

.animate-progress-bar {
    animation: progress-bar 4.5s linear forwards;
}

#cart-items::-webkit-scrollbar { width: 4px; }
#cart-items::-webkit-scrollbar-track { background: transparent; }
#cart-items::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
html.dark #cart-items::-webkit-scrollbar-thumb { background: #475569; }

.product-card:hover {
    transform: translateY(-2px);
}

.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 60;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    animation: fade-in 0.3s ease-out;
}
.toast-success {
    background: rgba(16, 185, 129, 0.95);
    color: white;
}
.toast-error {
    background: rgba(239, 68, 68, 0.95);
    color: white;
}

/* Dashboard mobile sidebar slide-in */
#user-sidebar.open,
#admin-sidebar.open { transform: translateX(0); }

/* CMS + product description content */
.cms-content h1 { font-size: 1.75rem; font-weight: 700; color: var(--text-primary); margin-top: 1.5rem; margin-bottom: 0.75rem; }
.cms-content h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin-top: 1.5rem; margin-bottom: 0.75rem; }
.cms-content h3 { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin-top: 1.25rem; margin-bottom: 0.5rem; }
.cms-content h4, .cms-content h5, .cms-content h6 { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-top: 1rem; margin-bottom: 0.5rem; }
.cms-content p { margin-bottom: 0.75rem; }
.cms-content ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.cms-content ol { list-style: decimal; padding-left: 1.25rem; margin-bottom: 0.75rem; }
.cms-content li { margin-bottom: 0.25rem; }
.cms-content a { color: #6366f1; text-decoration: underline; }
.cms-content img { max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem 0; }
.cms-content table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.875rem; }
.cms-content th, .cms-content td { border: 1px solid var(--border-subtle); padding: 0.5rem 0.75rem; text-align: left; }
.cms-content th { font-weight: 600; background: var(--surface-raised); }
.cms-content blockquote { border-left: 3px solid #6366f1; padding-left: 1rem; margin: 1rem 0; color: var(--text-muted); }
.cms-content hr { border: none; border-top: 1px solid var(--border-subtle); margin: 1.5rem 0; }