/* Dark Mode Variables Override */
html.dark {
    /* Main Backgrounds */
    --g50: #0f172a;        /* Main Body Background */
    --white: #1e293b;      /* Card / Header Background */
    
    /* Text Colors */
    --ink: #f8fafc;
    --ink2: #f1f5f9;
    --navy: #cbd5e1;
    --navy2: #94a3b8;
    
    /* Brand/Accent Colors (adjusted for dark bg) */
    --em: #38bdf8;
    --em-deep: #0284c7;
    --em-bg: #0f2942;
    --em-border: #0369a1;
    
    /* Grays & Borders */
    --g100: #334155;
    --g200: #475569;
    --g300: #64748b;
    --g400: #94a3b8;
    --g500: #cbd5e1;
    --g700: #e2e8f0;
    
    /* Box Shadows */
    --sh1: 0 1px 4px rgba(0, 0, 0, 0.4);
    --sh2: 0 4px 12px rgba(0, 0, 0, 0.5);
    --sh3: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* Specific elements adjustments for dark mode */
html.dark body {
    background-color: var(--g50);
    color: var(--ink);
}

html.dark .hdr {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-bottom-color: var(--g100);
}

html.dark .hdr-actions .nav-btn,
html.dark .bnav,
html.dark .pd-bottom-bar {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: var(--g100) !important;
}

html.dark .bnav-btn {
    color: var(--navy2);
}

html.dark .bnav-btn.active {
    color: var(--em);
}

html.dark .toast {
    background: #1e293b;
    color: var(--ink);
    border-left-color: var(--em);
}

html.dark .search-wrap {
    background: var(--white);
    border-color: var(--g200);
}

html.dark .prod-card,
html.dark .cat-item,
html.dark .vcard,
html.dark .pd-main-card,
html.dark .pd-card,
html.dark .pd-seller-card,
html.dark .testi-summary,
html.dark .testi-card,
html.dark .testi-form-wrap {
    background: var(--white);
    border-color: var(--g100);
}

html.dark .pd-breadcrumb,
html.dark .toko-desc-bar,
html.dark .toko-statsbar {
    background: var(--g50);
    border-color: var(--g100);
}

html.dark .pd-btn-back {
    background: var(--g100);
    color: var(--ink);
    border-color: var(--g200);
}

html.dark .pd-btn-back:hover {
    background: var(--em);
    color: #fff;
    border-color: var(--em);
}

html.dark .cat-circle {
    background: var(--g50);
}

/* Fix product grid and skeleton in dark mode */
html.dark .skel {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 400% 100%;
}

/* Text Overrides */
html.dark .section-title,
html.dark .pd-name,
html.dark .toko-hero-name,
html.dark .testi-title,
html.dark .testi-user-name,
html.dark .testi-avg-num {
    color: var(--ink);
}

html.dark .vcard-price,
html.dark .pd-price {
    background: linear-gradient(135deg, #38bdf8, #0284c7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.dark .prod-name {
    color: var(--ink);
}