/* ============================================
   🎨 THEME SYSTEM - 23 Digital Store
   Powered by UI/UX Pro Max Skill
   Each theme has Light + Dark mode variants
   ============================================ */

/* ─────────────────────────────────────────────
   1. DEFAULT THEME (Classic Blue)
   ───────────────────────────────────────────── */
:root,
[data-theme="default"] {
  --theme-primary: #007bff;
  --theme-primary-hover: #0056b3;
  --theme-primary-rgb: 0, 123, 255;
  --theme-secondary: #6c757d;
  --theme-accent: #00c6ff;
  --theme-gradient: linear-gradient(135deg, #0056b3, #00c6ff);
  --theme-gradient-hover: linear-gradient(135deg, #004494, #00a8d6);
  --theme-bg: #f4f7f6;
  --theme-card-bg: #ffffff;
  --theme-text: #2c3e50;
  --theme-text-muted: #666666;
  --theme-border: #eef0f5;
  --theme-navbar-bg: rgba(255, 255, 255, 0.85);
  --theme-nav-link: #555;
  --theme-nav-hover-bg: #f0f4f8;
  --theme-nav-active-bg: #eef5ff;
  --theme-card-shadow: 0 10px 30px rgba(0,0,0,0.04);
  --theme-card-hover-shadow: 0 15px 40px rgba(0,0,0,0.08);
  --theme-card-img-bg: #fbfbfb;
  --theme-card-footer-bg: #fafbfc;
  --theme-filter-border: #007bff;
  --theme-filter-active-bg: #007bff;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #fff0f0;
  --theme-price-border: #ffcaca;
  --theme-price-color: #d90429;
  --theme-footer-bg: #ffffff;
  --theme-footer-border: #eaeaea;
  --theme-search-border: #eef0f5;
  --theme-search-focus-border: #007bff;
  --theme-search-focus-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
  --theme-btn-shopee: linear-gradient(135deg, #ff6a00, #ee0979);
  --theme-btn-wa: linear-gradient(135deg, #25d366, #075e54);
  --theme-back-top: linear-gradient(135deg, #007bff, #00c6ff);
  --theme-back-top-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
  --theme-banner: linear-gradient(135deg, #ff416c, #ff4b2b);
  --theme-heading-color: #2c3e50;
  --theme-logo-color: #007bff;
  --theme-input-bg: #fafafa;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #007bff;
}

/* Default Dark */
[data-theme="default"] .dark-mode,
html:not([data-theme]) .dark-mode {
  --theme-primary: #4da3ff;
  --theme-primary-hover: #3b8de6;
  --theme-gradient: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  --theme-bg: #121212;
  --theme-card-bg: #1e1e1e;
  --theme-text: #e0e0e0;
  --theme-text-muted: #aaaaaa;
  --theme-border: #333333;
  --theme-navbar-bg: rgba(30, 30, 30, 0.9);
  --theme-nav-link: #cccccc;
  --theme-nav-hover-bg: #333333;
  --theme-nav-active-bg: #2a3b50;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(0,0,0,0.6);
  --theme-card-img-bg: #121212;
  --theme-card-footer-bg: #1a1a1a;
  --theme-filter-border: #4da3ff;
  --theme-filter-active-bg: #4da3ff;
  --theme-filter-active-text: #121212;
  --theme-price-bg: rgba(217, 4, 41, 0.08);
  --theme-price-border: rgba(217, 4, 41, 0.2);
  --theme-price-color: #ff4d6d;
  --theme-footer-bg: #1a1a1a;
  --theme-footer-border: #333333;
  --theme-search-border: #333333;
  --theme-search-focus-border: #4da3ff;
  --theme-search-focus-shadow: 0 8px 25px rgba(77, 163, 255, 0.2);
  --theme-back-top: linear-gradient(135deg, #1a73e8, #4da3ff);
  --theme-back-top-shadow: 0 6px 20px rgba(77, 163, 255, 0.4);
  --theme-banner: linear-gradient(135deg, #d90429, #8d021f);
  --theme-heading-color: #eeeeee;
  --theme-logo-color: #4da3ff;
  --theme-input-bg: #222222;
  --theme-input-focus-bg: #2a2a2a;
  --theme-table-header-bg: #1a73e8;
}


/* ─────────────────────────────────────────────
   2. OCEAN BREEZE (Teal/Cyan)
   ───────────────────────────────────────────── */
[data-theme="ocean"] {
  --theme-primary: #0891B2;
  --theme-primary-hover: #0E7490;
  --theme-primary-rgb: 8, 145, 178;
  --theme-secondary: #06B6D4;
  --theme-accent: #22D3EE;
  --theme-gradient: linear-gradient(135deg, #0E7490, #22D3EE);
  --theme-gradient-hover: linear-gradient(135deg, #0C6880, #14B8D0);
  --theme-bg: #F0FDFA;
  --theme-card-bg: #ffffff;
  --theme-text: #134E4A;
  --theme-text-muted: #5B7B78;
  --theme-border: #CCFBF1;
  --theme-navbar-bg: rgba(240, 253, 250, 0.9);
  --theme-nav-link: #5B7B78;
  --theme-nav-hover-bg: #E0F7F4;
  --theme-nav-active-bg: #CCFBF1;
  --theme-card-shadow: 0 10px 30px rgba(8, 145, 178, 0.06);
  --theme-card-hover-shadow: 0 15px 40px rgba(8, 145, 178, 0.12);
  --theme-card-img-bg: #F0FDFA;
  --theme-card-footer-bg: #F5FFFE;
  --theme-filter-border: #0891B2;
  --theme-filter-active-bg: #0891B2;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #ECFDF5;
  --theme-price-border: #A7F3D0;
  --theme-price-color: #059669;
  --theme-footer-bg: #F0FDFA;
  --theme-footer-border: #CCFBF1;
  --theme-search-border: #CCFBF1;
  --theme-search-focus-border: #0891B2;
  --theme-search-focus-shadow: 0 8px 25px rgba(8, 145, 178, 0.15);
  --theme-back-top: linear-gradient(135deg, #0891B2, #22D3EE);
  --theme-back-top-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
  --theme-banner: linear-gradient(135deg, #0891B2, #06B6D4);
  --theme-heading-color: #134E4A;
  --theme-logo-color: #0891B2;
  --theme-input-bg: #F0FDFA;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #0891B2;
}

/* Ocean Dark */
[data-theme="ocean"] .dark-mode {
  --theme-primary: #22D3EE;
  --theme-primary-hover: #06B6D4;
  --theme-gradient: linear-gradient(135deg, #072a30, #0E4A50);
  --theme-bg: #081418;
  --theme-card-bg: #0f2028;
  --theme-text: #d0ebe8;
  --theme-text-muted: #7aada5;
  --theme-border: #1a3840;
  --theme-navbar-bg: rgba(8, 20, 24, 0.95);
  --theme-nav-link: #7aada5;
  --theme-nav-hover-bg: #143038;
  --theme-nav-active-bg: #1a4048;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(8, 145, 178, 0.15);
  --theme-card-img-bg: #081418;
  --theme-card-footer-bg: #0c1c22;
  --theme-filter-border: #22D3EE;
  --theme-filter-active-bg: #22D3EE;
  --theme-filter-active-text: #081418;
  --theme-price-bg: rgba(5, 150, 105, 0.1);
  --theme-price-border: rgba(5, 150, 105, 0.25);
  --theme-price-color: #34D399;
  --theme-footer-bg: #081418;
  --theme-footer-border: #1a3840;
  --theme-search-border: #1a3840;
  --theme-search-focus-border: #22D3EE;
  --theme-search-focus-shadow: 0 8px 25px rgba(34, 211, 238, 0.2);
  --theme-back-top: linear-gradient(135deg, #0891B2, #22D3EE);
  --theme-back-top-shadow: 0 6px 20px rgba(34, 211, 238, 0.4);
  --theme-banner: linear-gradient(135deg, #0E7490, #0891B2);
  --theme-heading-color: #e0f5f2;
  --theme-logo-color: #22D3EE;
  --theme-input-bg: #0f2028;
  --theme-input-focus-bg: #143038;
  --theme-table-header-bg: #0E7490;
}


/* ─────────────────────────────────────────────
   3. SUNSET EMBER (Warm Orange/Red)
   ───────────────────────────────────────────── */
[data-theme="sunset"] {
  --theme-primary: #EA580C;
  --theme-primary-hover: #C2410C;
  --theme-primary-rgb: 234, 88, 12;
  --theme-secondary: #F97316;
  --theme-accent: #FBBF24;
  --theme-gradient: linear-gradient(135deg, #C2410C, #FBBF24);
  --theme-gradient-hover: linear-gradient(135deg, #9A3412, #F59E0B);
  --theme-bg: #FFFBEB;
  --theme-card-bg: #ffffff;
  --theme-text: #431407;
  --theme-text-muted: #92400E;
  --theme-border: #FEF3C7;
  --theme-navbar-bg: rgba(255, 251, 235, 0.9);
  --theme-nav-link: #78583B;
  --theme-nav-hover-bg: #FEF3C7;
  --theme-nav-active-bg: #FFEDD5;
  --theme-card-shadow: 0 10px 30px rgba(234, 88, 12, 0.06);
  --theme-card-hover-shadow: 0 15px 40px rgba(234, 88, 12, 0.12);
  --theme-card-img-bg: #FFFBEB;
  --theme-card-footer-bg: #FFFCF0;
  --theme-filter-border: #EA580C;
  --theme-filter-active-bg: #EA580C;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #FFF7ED;
  --theme-price-border: #FDBA74;
  --theme-price-color: #C2410C;
  --theme-footer-bg: #FFFBEB;
  --theme-footer-border: #FEF3C7;
  --theme-search-border: #FEF3C7;
  --theme-search-focus-border: #EA580C;
  --theme-search-focus-shadow: 0 8px 25px rgba(234, 88, 12, 0.15);
  --theme-back-top: linear-gradient(135deg, #EA580C, #FBBF24);
  --theme-back-top-shadow: 0 6px 20px rgba(234, 88, 12, 0.4);
  --theme-banner: linear-gradient(135deg, #EA580C, #F97316);
  --theme-heading-color: #431407;
  --theme-logo-color: #EA580C;
  --theme-input-bg: #FFFBEB;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #EA580C;
}

/* Sunset Dark */
[data-theme="sunset"] .dark-mode {
  --theme-primary: #FB923C;
  --theme-primary-hover: #F97316;
  --theme-gradient: linear-gradient(135deg, #2a1508, #4a2410);
  --theme-bg: #18100a;
  --theme-card-bg: #241a10;
  --theme-text: #f0dcc8;
  --theme-text-muted: #b89070;
  --theme-border: #3a2818;
  --theme-navbar-bg: rgba(24, 16, 10, 0.95);
  --theme-nav-link: #b89070;
  --theme-nav-hover-bg: #302010;
  --theme-nav-active-bg: #3a2818;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(234, 88, 12, 0.15);
  --theme-card-img-bg: #18100a;
  --theme-card-footer-bg: #1e1408;
  --theme-filter-border: #FB923C;
  --theme-filter-active-bg: #FB923C;
  --theme-filter-active-text: #18100a;
  --theme-price-bg: rgba(234, 88, 12, 0.1);
  --theme-price-border: rgba(234, 88, 12, 0.25);
  --theme-price-color: #FBBF24;
  --theme-footer-bg: #18100a;
  --theme-footer-border: #3a2818;
  --theme-search-border: #3a2818;
  --theme-search-focus-border: #FB923C;
  --theme-search-focus-shadow: 0 8px 25px rgba(251, 146, 60, 0.2);
  --theme-back-top: linear-gradient(135deg, #EA580C, #FBBF24);
  --theme-back-top-shadow: 0 6px 20px rgba(251, 146, 60, 0.4);
  --theme-banner: linear-gradient(135deg, #C2410C, #EA580C);
  --theme-heading-color: #f5e6d0;
  --theme-logo-color: #FB923C;
  --theme-input-bg: #241a10;
  --theme-input-focus-bg: #302010;
  --theme-table-header-bg: #C2410C;
}


/* ─────────────────────────────────────────────
   4. CYBER NEON (Purple/Pink Gradient)
   ───────────────────────────────────────────── */
[data-theme="cyber"] {
  --theme-primary: #7C3AED;
  --theme-primary-hover: #6D28D9;
  --theme-primary-rgb: 124, 58, 237;
  --theme-secondary: #A855F7;
  --theme-accent: #EC4899;
  --theme-gradient: linear-gradient(135deg, #6D28D9, #EC4899);
  --theme-gradient-hover: linear-gradient(135deg, #5B21B6, #DB2777);
  --theme-bg: #FAF5FF;
  --theme-card-bg: #ffffff;
  --theme-text: #2E1065;
  --theme-text-muted: #7C3AED;
  --theme-border: #EDE9FE;
  --theme-navbar-bg: rgba(250, 245, 255, 0.9);
  --theme-nav-link: #6B5891;
  --theme-nav-hover-bg: #EDE9FE;
  --theme-nav-active-bg: #F3E8FF;
  --theme-card-shadow: 0 10px 30px rgba(124, 58, 237, 0.06);
  --theme-card-hover-shadow: 0 15px 40px rgba(124, 58, 237, 0.12);
  --theme-card-img-bg: #FAF5FF;
  --theme-card-footer-bg: #FDF8FF;
  --theme-filter-border: #7C3AED;
  --theme-filter-active-bg: #7C3AED;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #FDF2F8;
  --theme-price-border: #FBCFE8;
  --theme-price-color: #BE185D;
  --theme-footer-bg: #FAF5FF;
  --theme-footer-border: #EDE9FE;
  --theme-search-border: #EDE9FE;
  --theme-search-focus-border: #7C3AED;
  --theme-search-focus-shadow: 0 8px 25px rgba(124, 58, 237, 0.15);
  --theme-back-top: linear-gradient(135deg, #7C3AED, #EC4899);
  --theme-back-top-shadow: 0 6px 20px rgba(124, 58, 237, 0.4);
  --theme-banner: linear-gradient(135deg, #7C3AED, #EC4899);
  --theme-heading-color: #2E1065;
  --theme-logo-color: #7C3AED;
  --theme-input-bg: #FAF5FF;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #7C3AED;
}

/* Cyber Dark */
[data-theme="cyber"] .dark-mode {
  --theme-primary: #A855F7;
  --theme-primary-hover: #9333EA;
  --theme-gradient: linear-gradient(135deg, #1a0830, #380a40);
  --theme-bg: #0e0618;
  --theme-card-bg: #1a0e28;
  --theme-text: #e0d4f0;
  --theme-text-muted: #a08cc0;
  --theme-border: #2a1840;
  --theme-navbar-bg: rgba(14, 6, 24, 0.95);
  --theme-nav-link: #a08cc0;
  --theme-nav-hover-bg: #221438;
  --theme-nav-active-bg: #2a1840;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(124, 58, 237, 0.2);
  --theme-card-img-bg: #0e0618;
  --theme-card-footer-bg: #140a20;
  --theme-filter-border: #A855F7;
  --theme-filter-active-bg: #A855F7;
  --theme-filter-active-text: #0e0618;
  --theme-price-bg: rgba(236, 72, 153, 0.1);
  --theme-price-border: rgba(236, 72, 153, 0.25);
  --theme-price-color: #F472B6;
  --theme-footer-bg: #0e0618;
  --theme-footer-border: #2a1840;
  --theme-search-border: #2a1840;
  --theme-search-focus-border: #A855F7;
  --theme-search-focus-shadow: 0 8px 25px rgba(168, 85, 247, 0.25);
  --theme-back-top: linear-gradient(135deg, #7C3AED, #EC4899);
  --theme-back-top-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
  --theme-banner: linear-gradient(135deg, #6D28D9, #A855F7);
  --theme-heading-color: #eddff8;
  --theme-logo-color: #A855F7;
  --theme-input-bg: #1a0e28;
  --theme-input-focus-bg: #221438;
  --theme-table-header-bg: #6D28D9;
}


/* ─────────────────────────────────────────────
   5. FOREST EMERALD (Green/Nature)
   ───────────────────────────────────────────── */
[data-theme="forest"] {
  --theme-primary: #059669;
  --theme-primary-hover: #047857;
  --theme-primary-rgb: 5, 150, 105;
  --theme-secondary: #10B981;
  --theme-accent: #34D399;
  --theme-gradient: linear-gradient(135deg, #047857, #34D399);
  --theme-gradient-hover: linear-gradient(135deg, #065F46, #10B981);
  --theme-bg: #ECFDF5;
  --theme-card-bg: #ffffff;
  --theme-text: #064E3B;
  --theme-text-muted: #6B8A80;
  --theme-border: #A7F3D0;
  --theme-navbar-bg: rgba(236, 253, 245, 0.9);
  --theme-nav-link: #4B7A6B;
  --theme-nav-hover-bg: #D1FAE5;
  --theme-nav-active-bg: #A7F3D0;
  --theme-card-shadow: 0 10px 30px rgba(5, 150, 105, 0.06);
  --theme-card-hover-shadow: 0 15px 40px rgba(5, 150, 105, 0.12);
  --theme-card-img-bg: #ECFDF5;
  --theme-card-footer-bg: #F5FFF9;
  --theme-filter-border: #059669;
  --theme-filter-active-bg: #059669;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #ECFDF5;
  --theme-price-border: #A7F3D0;
  --theme-price-color: #047857;
  --theme-footer-bg: #ECFDF5;
  --theme-footer-border: #A7F3D0;
  --theme-search-border: #A7F3D0;
  --theme-search-focus-border: #059669;
  --theme-search-focus-shadow: 0 8px 25px rgba(5, 150, 105, 0.15);
  --theme-back-top: linear-gradient(135deg, #059669, #34D399);
  --theme-back-top-shadow: 0 6px 20px rgba(5, 150, 105, 0.4);
  --theme-banner: linear-gradient(135deg, #059669, #10B981);
  --theme-heading-color: #064E3B;
  --theme-logo-color: #059669;
  --theme-input-bg: #ECFDF5;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #059669;
}

/* Forest Dark */
[data-theme="forest"] .dark-mode {
  --theme-primary: #34D399;
  --theme-primary-hover: #10B981;
  --theme-gradient: linear-gradient(135deg, #062a1c, #0a3828);
  --theme-bg: #081410;
  --theme-card-bg: #0f201a;
  --theme-text: #c8ead8;
  --theme-text-muted: #6aaa88;
  --theme-border: #183828;
  --theme-navbar-bg: rgba(8, 20, 16, 0.95);
  --theme-nav-link: #6aaa88;
  --theme-nav-hover-bg: #142e22;
  --theme-nav-active-bg: #1a3828;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(5, 150, 105, 0.15);
  --theme-card-img-bg: #081410;
  --theme-card-footer-bg: #0c1a14;
  --theme-filter-border: #34D399;
  --theme-filter-active-bg: #34D399;
  --theme-filter-active-text: #081410;
  --theme-price-bg: rgba(5, 150, 105, 0.1);
  --theme-price-border: rgba(5, 150, 105, 0.25);
  --theme-price-color: #6EE7B7;
  --theme-footer-bg: #081410;
  --theme-footer-border: #183828;
  --theme-search-border: #183828;
  --theme-search-focus-border: #34D399;
  --theme-search-focus-shadow: 0 8px 25px rgba(52, 211, 153, 0.2);
  --theme-back-top: linear-gradient(135deg, #059669, #34D399);
  --theme-back-top-shadow: 0 6px 20px rgba(52, 211, 153, 0.4);
  --theme-banner: linear-gradient(135deg, #047857, #059669);
  --theme-heading-color: #d5f0e0;
  --theme-logo-color: #34D399;
  --theme-input-bg: #0f201a;
  --theme-input-focus-bg: #142e22;
  --theme-table-header-bg: #047857;
}


/* ─────────────────────────────────────────────
   6. DIGITAL INDIGO (Purple/Blue Tech)
   ───────────────────────────────────────────── */
[data-theme="indigo"] {
  --theme-primary: #6366F1;
  --theme-primary-hover: #4F46E5;
  --theme-primary-rgb: 99, 102, 241;
  --theme-secondary: #818CF8;
  --theme-accent: #16A34A;
  --theme-gradient: linear-gradient(135deg, #4F46E5, #818CF8);
  --theme-gradient-hover: linear-gradient(135deg, #4338CA, #6366F1);
  --theme-bg: #EEF2FF;
  --theme-card-bg: #ffffff;
  --theme-text: #312E81;
  --theme-text-muted: #6B6BAD;
  --theme-border: #C7D2FE;
  --theme-navbar-bg: rgba(238, 242, 255, 0.9);
  --theme-nav-link: #6366A0;
  --theme-nav-hover-bg: #E0E7FF;
  --theme-nav-active-bg: #C7D2FE;
  --theme-card-shadow: 0 10px 30px rgba(99, 102, 241, 0.06);
  --theme-card-hover-shadow: 0 15px 40px rgba(99, 102, 241, 0.12);
  --theme-card-img-bg: #EEF2FF;
  --theme-card-footer-bg: #F5F7FF;
  --theme-filter-border: #6366F1;
  --theme-filter-active-bg: #6366F1;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #EEF2FF;
  --theme-price-border: #C7D2FE;
  --theme-price-color: #4F46E5;
  --theme-footer-bg: #EEF2FF;
  --theme-footer-border: #C7D2FE;
  --theme-search-border: #C7D2FE;
  --theme-search-focus-border: #6366F1;
  --theme-search-focus-shadow: 0 8px 25px rgba(99, 102, 241, 0.15);
  --theme-back-top: linear-gradient(135deg, #6366F1, #818CF8);
  --theme-back-top-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
  --theme-banner: linear-gradient(135deg, #6366F1, #818CF8);
  --theme-heading-color: #312E81;
  --theme-logo-color: #6366F1;
  --theme-input-bg: #EEF2FF;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #6366F1;
}

/* Indigo Dark */
[data-theme="indigo"] .dark-mode {
  --theme-primary: #818CF8;
  --theme-primary-hover: #6366F1;
  --theme-gradient: linear-gradient(135deg, #0a0a2a, #181840);
  --theme-bg: #0a0a1a;
  --theme-card-bg: #141428;
  --theme-text: #d8daf0;
  --theme-text-muted: #8888c0;
  --theme-border: #282850;
  --theme-navbar-bg: rgba(10, 10, 26, 0.95);
  --theme-nav-link: #8888c0;
  --theme-nav-hover-bg: #1e1e40;
  --theme-nav-active-bg: #282850;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(99, 102, 241, 0.2);
  --theme-card-img-bg: #0a0a1a;
  --theme-card-footer-bg: #101020;
  --theme-filter-border: #818CF8;
  --theme-filter-active-bg: #818CF8;
  --theme-filter-active-text: #0a0a1a;
  --theme-price-bg: rgba(99, 102, 241, 0.1);
  --theme-price-border: rgba(99, 102, 241, 0.25);
  --theme-price-color: #A5B4FC;
  --theme-footer-bg: #0a0a1a;
  --theme-footer-border: #282850;
  --theme-search-border: #282850;
  --theme-search-focus-border: #818CF8;
  --theme-search-focus-shadow: 0 8px 25px rgba(129, 140, 248, 0.25);
  --theme-back-top: linear-gradient(135deg, #6366F1, #818CF8);
  --theme-back-top-shadow: 0 6px 20px rgba(129, 140, 248, 0.4);
  --theme-banner: linear-gradient(135deg, #4F46E5, #6366F1);
  --theme-heading-color: #e0e2f5;
  --theme-logo-color: #818CF8;
  --theme-input-bg: #141428;
  --theme-input-focus-bg: #1e1e40;
  --theme-table-header-bg: #4F46E5;
}


/* ─────────────────────────────────────────────
   7. ROSE GOLD (Luxury/Premium)
   ───────────────────────────────────────────── */
[data-theme="rosegold"] {
  --theme-primary: #9F1239;
  --theme-primary-hover: #881337;
  --theme-primary-rgb: 159, 18, 57;
  --theme-secondary: #E11D48;
  --theme-accent: #A16207;
  --theme-gradient: linear-gradient(135deg, #881337, #E11D48);
  --theme-gradient-hover: linear-gradient(135deg, #740E2E, #BE123C);
  --theme-bg: #FFF1F2;
  --theme-card-bg: #ffffff;
  --theme-text: #4C0519;
  --theme-text-muted: #9F6074;
  --theme-border: #FECDD3;
  --theme-navbar-bg: rgba(255, 241, 242, 0.9);
  --theme-nav-link: #7A4055;
  --theme-nav-hover-bg: #FFE4E6;
  --theme-nav-active-bg: #FECDD3;
  --theme-card-shadow: 0 10px 30px rgba(159, 18, 57, 0.06);
  --theme-card-hover-shadow: 0 15px 40px rgba(159, 18, 57, 0.12);
  --theme-card-img-bg: #FFF1F2;
  --theme-card-footer-bg: #FFF5F6;
  --theme-filter-border: #9F1239;
  --theme-filter-active-bg: #9F1239;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: #FFF1F2;
  --theme-price-border: #FECDD3;
  --theme-price-color: #9F1239;
  --theme-footer-bg: #FFF1F2;
  --theme-footer-border: #FECDD3;
  --theme-search-border: #FECDD3;
  --theme-search-focus-border: #9F1239;
  --theme-search-focus-shadow: 0 8px 25px rgba(159, 18, 57, 0.15);
  --theme-back-top: linear-gradient(135deg, #9F1239, #E11D48);
  --theme-back-top-shadow: 0 6px 20px rgba(159, 18, 57, 0.4);
  --theme-banner: linear-gradient(135deg, #9F1239, #E11D48);
  --theme-heading-color: #4C0519;
  --theme-logo-color: #9F1239;
  --theme-input-bg: #FFF1F2;
  --theme-input-focus-bg: #ffffff;
  --theme-table-header-bg: #9F1239;
}

/* Rose Gold Dark */
[data-theme="rosegold"] .dark-mode {
  --theme-primary: #FB7185;
  --theme-primary-hover: #F43F5E;
  --theme-gradient: linear-gradient(135deg, #2a0818, #400e20);
  --theme-bg: #180810;
  --theme-card-bg: #281018;
  --theme-text: #f0d8e0;
  --theme-text-muted: #b07888;
  --theme-border: #3a1828;
  --theme-navbar-bg: rgba(24, 8, 16, 0.95);
  --theme-nav-link: #b07888;
  --theme-nav-hover-bg: #301420;
  --theme-nav-active-bg: #3a1828;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.5);
  --theme-card-hover-shadow: 0 15px 40px rgba(159, 18, 57, 0.2);
  --theme-card-img-bg: #180810;
  --theme-card-footer-bg: #200c14;
  --theme-filter-border: #FB7185;
  --theme-filter-active-bg: #FB7185;
  --theme-filter-active-text: #180810;
  --theme-price-bg: rgba(225, 29, 72, 0.1);
  --theme-price-border: rgba(225, 29, 72, 0.25);
  --theme-price-color: #FDA4AF;
  --theme-footer-bg: #180810;
  --theme-footer-border: #3a1828;
  --theme-search-border: #3a1828;
  --theme-search-focus-border: #FB7185;
  --theme-search-focus-shadow: 0 8px 25px rgba(251, 113, 133, 0.2);
  --theme-back-top: linear-gradient(135deg, #E11D48, #FB7185);
  --theme-back-top-shadow: 0 6px 20px rgba(251, 113, 133, 0.4);
  --theme-banner: linear-gradient(135deg, #881337, #9F1239);
  --theme-heading-color: #f5e0e8;
  --theme-logo-color: #FB7185;
  --theme-input-bg: #281018;
  --theme-input-focus-bg: #301420;
  --theme-table-header-bg: #881337;
}


/* ─────────────────────────────────────────────
   8. MIDNIGHT (Always Dark)
   ───────────────────────────────────────────── */
[data-theme="midnight"] {
  --theme-primary: #3B82F6;
  --theme-primary-hover: #2563EB;
  --theme-primary-rgb: 59, 130, 246;
  --theme-secondary: #60A5FA;
  --theme-accent: #22D3EE;
  --theme-gradient: linear-gradient(135deg, #0F172A, #1E3A5F);
  --theme-gradient-hover: linear-gradient(135deg, #0C1222, #162D4A);
  --theme-bg: #0F172A;
  --theme-card-bg: #1E293B;
  --theme-text: #F1F5F9;
  --theme-text-muted: #94A3B8;
  --theme-border: #334155;
  --theme-navbar-bg: rgba(15, 23, 42, 0.95);
  --theme-nav-link: #94A3B8;
  --theme-nav-hover-bg: #1E293B;
  --theme-nav-active-bg: #1E3A5F;
  --theme-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  --theme-card-hover-shadow: 0 15px 40px rgba(59, 130, 246, 0.15);
  --theme-card-img-bg: #0F172A;
  --theme-card-footer-bg: #162033;
  --theme-filter-border: #3B82F6;
  --theme-filter-active-bg: #3B82F6;
  --theme-filter-active-text: #ffffff;
  --theme-price-bg: rgba(59, 130, 246, 0.08);
  --theme-price-border: rgba(59, 130, 246, 0.2);
  --theme-price-color: #60A5FA;
  --theme-footer-bg: #0F172A;
  --theme-footer-border: #334155;
  --theme-search-border: #334155;
  --theme-search-focus-border: #3B82F6;
  --theme-search-focus-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
  --theme-back-top: linear-gradient(135deg, #3B82F6, #22D3EE);
  --theme-back-top-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
  --theme-banner: linear-gradient(135deg, #3B82F6, #2563EB);
  --theme-heading-color: #F1F5F9;
  --theme-logo-color: #3B82F6;
  --theme-input-bg: #1E293B;
  --theme-input-focus-bg: #253349;
  --theme-table-header-bg: #3B82F6;
}

/* Midnight Dark (deeper) */
[data-theme="midnight"] .dark-mode {
  --theme-primary: #60A5FA;
  --theme-primary-hover: #3B82F6;
  --theme-gradient: linear-gradient(135deg, #060C18, #0F1E33);
  --theme-bg: #060C18;
  --theme-card-bg: #0F172A;
  --theme-text: #E2E8F0;
  --theme-text-muted: #64748B;
  --theme-border: #1E293B;
  --theme-navbar-bg: rgba(6, 12, 24, 0.98);
  --theme-nav-link: #64748B;
  --theme-nav-hover-bg: #0F172A;
  --theme-nav-active-bg: #162D4A;
  --theme-card-shadow: 0 8px 25px rgba(0,0,0,0.6);
  --theme-card-hover-shadow: 0 15px 40px rgba(59, 130, 246, 0.2);
  --theme-card-img-bg: #060C18;
  --theme-card-footer-bg: #0C1222;
  --theme-filter-border: #60A5FA;
  --theme-filter-active-bg: #60A5FA;
  --theme-filter-active-text: #060C18;
  --theme-price-bg: rgba(59, 130, 246, 0.06);
  --theme-price-border: rgba(59, 130, 246, 0.15);
  --theme-price-color: #93C5FD;
  --theme-footer-bg: #060C18;
  --theme-footer-border: #1E293B;
  --theme-search-border: #1E293B;
  --theme-search-focus-border: #60A5FA;
  --theme-search-focus-shadow: 0 8px 25px rgba(96, 165, 250, 0.2);
  --theme-back-top: linear-gradient(135deg, #3B82F6, #60A5FA);
  --theme-back-top-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);
  --theme-banner: linear-gradient(135deg, #2563EB, #3B82F6);
  --theme-heading-color: #E2E8F0;
  --theme-logo-color: #60A5FA;
  --theme-input-bg: #0F172A;
  --theme-input-focus-bg: #162D4A;
  --theme-table-header-bg: #2563EB;
}


/* ============================================
   Apply theme variables to themed components
   ============================================ */

/* ─── Themed Navbar ─── */
[data-theme]:not([data-theme="default"]) .navbar {
  background: var(--theme-navbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--theme-border);
}
[data-theme]:not([data-theme="default"]) .navbar .logo {
  color: var(--theme-logo-color);
}
[data-theme]:not([data-theme="default"]) .navbar .nav-links a {
  color: var(--theme-nav-link);
}
[data-theme]:not([data-theme="default"]) .navbar .nav-links a:hover {
  background: var(--theme-nav-hover-bg);
  color: var(--theme-primary);
}
[data-theme]:not([data-theme="default"]) .navbar .nav-links a.active {
  color: var(--theme-primary);
  background: var(--theme-nav-active-bg);
}

/* ─── Themed Hero ─── */
[data-theme]:not([data-theme="default"]) header {
  background: var(--theme-gradient);
  box-shadow: 0 10px 30px rgba(var(--theme-primary-rgb), 0.2);
}

/* ─── Themed Cards ─── */
[data-theme]:not([data-theme="default"]) .card {
  background: var(--theme-card-bg);
  box-shadow: var(--theme-card-shadow);
  border-color: var(--theme-border);
}
[data-theme]:not([data-theme="default"]) .card.visible:hover {
  box-shadow: var(--theme-card-hover-shadow);
}
[data-theme]:not([data-theme="default"]) .card img {
  background: var(--theme-card-img-bg);
  border-bottom-color: var(--theme-border);
}
[data-theme]:not([data-theme="default"]) .card-body h2 {
  color: var(--theme-heading-color);
}
[data-theme]:not([data-theme="default"]) .card-body p {
  color: var(--theme-text-muted);
}
[data-theme]:not([data-theme="default"]) .card-footer {
  background: var(--theme-card-footer-bg);
  border-top-color: var(--theme-border);
}

/* ─── Themed Price ─── */
[data-theme]:not([data-theme="default"]) .price-box {
  background: var(--theme-price-bg);
  border-color: var(--theme-price-border);
}
[data-theme]:not([data-theme="default"]) .promo-price {
  color: var(--theme-price-color);
}

/* ─── Themed Search & Filter ─── */
[data-theme]:not([data-theme="default"]) .search-box input,
[data-theme]:not([data-theme="default"]) .search-box select {
  border-color: var(--theme-search-border);
  background: var(--theme-card-bg);
  color: var(--theme-text);
}
[data-theme]:not([data-theme="default"]) .search-box input:focus,
[data-theme]:not([data-theme="default"]) .search-box select:focus {
  border-color: var(--theme-search-focus-border);
  box-shadow: var(--theme-search-focus-shadow);
}
[data-theme]:not([data-theme="default"]) .filter-btn {
  border-color: var(--theme-filter-border);
  color: var(--theme-primary);
}
[data-theme]:not([data-theme="default"]) .filter-btn:hover,
[data-theme]:not([data-theme="default"]) .filter-btn.active {
  background: var(--theme-filter-active-bg);
  color: var(--theme-filter-active-text);
  box-shadow: 0 6px 15px rgba(var(--theme-primary-rgb), 0.2);
}

/* ─── Themed Footer ─── */
[data-theme]:not([data-theme="default"]) footer {
  background: var(--theme-footer-bg);
  border-top-color: var(--theme-footer-border);
  color: var(--theme-text-muted);
}
[data-theme]:not([data-theme="default"]) footer a {
  color: var(--theme-primary);
}
[data-theme]:not([data-theme="default"]) footer a:hover {
  color: var(--theme-primary-hover);
}

/* ─── Themed Banner ─── */
[data-theme]:not([data-theme="default"]) .top-banner {
  background: var(--theme-banner);
}

/* ─── Themed Back to Top ─── */
[data-theme]:not([data-theme="default"]) #backToTop {
  background: var(--theme-back-top);
  box-shadow: var(--theme-back-top-shadow);
}
[data-theme]:not([data-theme="default"]) #backToTop:hover {
  background: var(--theme-gradient-hover);
}

/* ─── Themed Container Text ─── */
[data-theme]:not([data-theme="default"]) .container p,
[data-theme]:not([data-theme="default"]) .container ul {
  color: var(--theme-text-muted);
}
[data-theme]:not([data-theme="default"]) .container h1 {
  color: var(--theme-heading-color);
}

/* ─── Themed Contact Info ─── */
[data-theme]:not([data-theme="default"]) .contact-info {
  background: var(--theme-card-bg);
  box-shadow: var(--theme-card-shadow);
}
[data-theme]:not([data-theme="default"]) .contact-info a {
  color: var(--theme-primary);
}

/* ─── Themed Forms ─── */
[data-theme]:not([data-theme="default"]) .form-wrapper input,
[data-theme]:not([data-theme="default"]) .form-wrapper textarea,
[data-theme]:not([data-theme="default"]) .form-wrapper select,
[data-theme]:not([data-theme="default"]) .admin-form input,
[data-theme]:not([data-theme="default"]) .admin-form textarea,
[data-theme]:not([data-theme="default"]) .admin-form select {
  background: var(--theme-input-bg);
  border-color: var(--theme-border);
  color: var(--theme-text);
}
[data-theme]:not([data-theme="default"]) .form-wrapper input:focus,
[data-theme]:not([data-theme="default"]) .form-wrapper textarea:focus,
[data-theme]:not([data-theme="default"]) .admin-form input:focus,
[data-theme]:not([data-theme="default"]) .admin-form textarea:focus {
  border-color: var(--theme-primary);
  background: var(--theme-input-focus-bg);
  box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.1);
}
[data-theme]:not([data-theme="default"]) .form-wrapper button,
[data-theme]:not([data-theme="default"]) .admin-form button {
  background: var(--theme-primary);
}
[data-theme]:not([data-theme="default"]) .form-wrapper button:hover,
[data-theme]:not([data-theme="default"]) .admin-form button:hover {
  background: var(--theme-primary-hover);
  box-shadow: 0 8px 20px rgba(var(--theme-primary-rgb), 0.3);
}
[data-theme]:not([data-theme="default"]) .form-wrapper h2,
[data-theme]:not([data-theme="default"]) .admin-form h2 {
  color: var(--theme-primary);
}

/* ─── Themed Tables ─── */
[data-theme]:not([data-theme="default"]) .table-admin th {
  background: var(--theme-table-header-bg);
}
[data-theme]:not([data-theme="default"]) .table-admin td {
  color: var(--theme-text);
  border-bottom-color: var(--theme-border);
}
[data-theme]:not([data-theme="default"]) .table-admin tr:hover td {
  background: var(--theme-nav-hover-bg);
}
[data-theme]:not([data-theme="default"]) .table-admin a {
  color: var(--theme-primary);
}

/* ─── Themed Modal ─── */
[data-theme]:not([data-theme="default"]) .modal-content {
  background-color: var(--theme-card-bg);
  border: 1px solid var(--theme-border);
}
[data-theme]:not([data-theme="default"]) .modal-image-container {
  background: var(--theme-card-img-bg);
  border-color: var(--theme-border);
}
[data-theme]:not([data-theme="default"]) .modal-title {
  color: var(--theme-heading-color);
}
[data-theme]:not([data-theme="default"]) .modal-desc {
  color: var(--theme-text-muted);
}
[data-theme]:not([data-theme="default"]) .modal-price-box {
  background: var(--theme-price-bg);
  border-color: var(--theme-price-border);
}

/* ─── Themed Empty State ─── */
[data-theme]:not([data-theme="default"]) .empty-state h3 {
  color: var(--theme-heading-color);
}
[data-theme]:not([data-theme="default"]) .empty-state p {
  color: var(--theme-text-muted);
}

/* ─── Themed Detail Button ─── */
[data-theme]:not([data-theme="default"]) .btn-detail {
  background: var(--theme-primary);
}
[data-theme]:not([data-theme="default"]) .btn-detail:hover {
  background: var(--theme-primary-hover);
}

/* ─── Themed Form Wrapper/Contact ─── */
[data-theme]:not([data-theme="default"]) .form-wrapper,
[data-theme]:not([data-theme="default"]) .admin-form {
  background: var(--theme-card-bg);
  box-shadow: var(--theme-card-shadow);
}
[data-theme]:not([data-theme="default"]) .form-wrapper label,
[data-theme]:not([data-theme="default"]) .admin-form label {
  color: var(--theme-text);
}