/* ============================================================
   COLOR SCHEME OVERRIDE — Dark / Light Mode
   Applied via  html[data-scheme="dark"]  or  html[data-scheme="light"]
   Loaded after the active theme stylesheet so it wins via specificity.
   Overrides all 6 themes' CSS custom properties.
   The accent --primary-color is intentionally NOT overridden so the
   user's chosen accent colour shows through in both modes.
   ============================================================ */

/* ──────────────────────────────────────────
   DARK MODE
   ────────────────────────────────────────── */
html[data-scheme="dark"] {
    /* backgrounds */
    --page-bg:       #0d0d10 !important;
    --nav-bg:        rgba(16,16,22,0.96) !important;
    --strip-bg:      #161619 !important;
    --sidebar-bg:    #111116 !important;
    --header-bg:     rgba(13,13,16,0.94) !important;
    --card-bg:       rgba(255,255,255,0.055) !important;
    --card-border:   rgba(255,255,255,0.10) !important;
    --glass-bg:      rgba(255,255,255,0.05) !important;

    /* text */
    --text-1:         #E8ECF4 !important;
    --text-2:         #94A3B8 !important;
    --text-3:         #4A5568 !important;
    --text-primary:   #E8ECF4 !important;
    --text-secondary: #94A3B8 !important;
    --text-muted:     #4A5568 !important;

    /* borders & shadows */
    --border:       rgba(255,255,255,0.09) !important;
    --border-color: rgba(255,255,255,0.09) !important;
    --border-dark:  rgba(255,255,255,0.22) !important;
    --shadow-sm:    0 1px 4px rgba(0,0,0,0.45) !important;
    --shadow-md:    0 4px 18px rgba(0,0,0,0.55) !important;
    --shadow-lg:    0 12px 42px rgba(0,0,0,0.65) !important;
}

html[data-scheme="dark"] body {
    background: #0d0d10 !important;
    background-image: none !important;
    background-attachment: initial !important;
    color: #E8ECF4 !important;
}

/* cards, product tiles */
html[data-scheme="dark"] .card,
html[data-scheme="dark"] .product-card,
html[data-scheme="dark"] [class*="-card"]:not(.b-bar):not(.b-sidebar):not(.b-btn-primary):not(.b-btn-ghost) {
    background: rgba(255,255,255,0.055) !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* navigation / headers */
html[data-scheme="dark"] .main-menu,
html[data-scheme="dark"] .header-area,
html[data-scheme="dark"] .site-header,
html[data-scheme="dark"] .category-strip,
html[data-scheme="dark"] .navbar {
    background: rgba(16,16,22,0.96) !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* footer */
html[data-scheme="dark"] footer,
html[data-scheme="dark"] .footer-area {
    background: #0a0a0d !important;
    border-color: rgba(255,255,255,0.09) !important;
}

/* inputs & selects */
html[data-scheme="dark"] input,
html[data-scheme="dark"] select,
html[data-scheme="dark"] textarea {
    background: rgba(255,255,255,0.07) !important;
    border-color: rgba(255,255,255,0.14) !important;
    color: #E8ECF4 !important;
}

/* modal / overlay panels */
html[data-scheme="dark"] .modal-content,
html[data-scheme="dark"] .cart-sidebar,
html[data-scheme="dark"] .offcanvas,
html[data-scheme="dark"] .dropdown-menu {
    background: #18181f !important;
    border-color: rgba(255,255,255,0.10) !important;
    color: #E8ECF4 !important;
}

/* ──────────────────────────────────────────
   LIGHT MODE
   ────────────────────────────────────────── */
html[data-scheme="light"] {
    /* backgrounds */
    --page-bg:       #F5F5F7 !important;
    --nav-bg:        rgba(255,255,255,0.96) !important;
    --strip-bg:      #ffffff !important;
    --sidebar-bg:    #ffffff !important;
    --header-bg:     rgba(255,255,255,0.96) !important;
    --card-bg:       #ffffff !important;
    --card-border:   #E5E7EB !important;
    --glass-bg:      rgba(0,0,0,0.03) !important;

    /* text */
    --text-1:         #111827 !important;
    --text-2:         #374151 !important;
    --text-3:         #9CA3AF !important;
    --text-primary:   #111827 !important;
    --text-secondary: #6B7280 !important;
    --text-muted:     #9CA3AF !important;

    /* borders & shadows */
    --border:       #E5E7EB !important;
    --border-color: #E5E7EB !important;
    --border-dark:  #111827 !important;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.07) !important;
    --shadow-md:    0 4px 16px rgba(0,0,0,0.10) !important;
    --shadow-lg:    0 12px 40px rgba(0,0,0,0.14) !important;
}

html[data-scheme="light"] body {
    background: #F5F5F7 !important;
    background-image: none !important;
    background-attachment: initial !important;
    color: #111827 !important;
}

/* navigation */
html[data-scheme="light"] .main-menu,
html[data-scheme="light"] .header-area,
html[data-scheme="light"] .site-header,
html[data-scheme="light"] .category-strip,
html[data-scheme="light"] .navbar {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
}

/* sidebar (overrides dark sidebars in theme2, theme3, theme5) */
html[data-scheme="light"] [class*="sidebar"],
html[data-scheme="light"] .main-menu {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
}

/* sidebar text fix */
html[data-scheme="light"] [class*="sidebar"] *,
html[data-scheme="light"] .main-menu * {
    color: #111827;
    border-color: #E5E7EB;
}
html[data-scheme="light"] [class*="sidebar"] a:hover,
html[data-scheme="light"] .main-menu a:hover {
    color: var(--primary-color, #1abc9c);
}

/* cards */
html[data-scheme="light"] .card,
html[data-scheme="light"] .product-card,
html[data-scheme="light"] [class*="-card"]:not(.b-bar):not(.b-sidebar):not(.b-btn-primary):not(.b-btn-ghost) {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
}

/* footer */
html[data-scheme="light"] footer,
html[data-scheme="light"] .footer-area {
    background: #F0F0F2 !important;
    border-color: #E5E7EB !important;
}

/* inputs */
html[data-scheme="light"] input,
html[data-scheme="light"] select,
html[data-scheme="light"] textarea {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
    color: #111827 !important;
}

/* modal / overlay panels */
html[data-scheme="light"] .modal-content,
html[data-scheme="light"] .cart-sidebar,
html[data-scheme="light"] .offcanvas,
html[data-scheme="light"] .dropdown-menu {
    background: #ffffff !important;
    border-color: #E5E7EB !important;
    color: #111827 !important;
}