html[data-esh-theme="dark"] {
    color-scheme: dark;
    --esh-dark-bg: #111827;
    --esh-dark-surface: #1f2937;
    --esh-dark-border: #374151;
    --esh-dark-text: #e5e7eb;
    --esh-dark-muted: #aab4c2;
}

html[data-esh-theme="dark"] body {
    background-color: var(--esh-dark-bg);
    color: var(--esh-dark-text);
}

html[data-esh-theme="dark"] .header_main,
html[data-esh-theme="dark"] .esh-secondary-row,
html[data-esh-theme="dark"] .card,
html[data-esh-theme="dark"] .dropdown-menu,
html[data-esh-theme="dark"] .offcanvas,
html[data-esh-theme="dark"] .modal-content,
html[data-esh-theme="dark"] .list-group-item,
html[data-esh-theme="dark"] .bg-white {
    background-color: var(--esh-dark-surface) !important;
    border-color: var(--esh-dark-border) !important;
    color: var(--esh-dark-text);
}

html[data-esh-theme="dark"] .card-header,
html[data-esh-theme="dark"] .card-footer,
html[data-esh-theme="dark"] .form-control,
html[data-esh-theme="dark"] .form-select,
html[data-esh-theme="dark"] .table {
    background-color: var(--esh-dark-surface);
    border-color: var(--esh-dark-border);
    color: var(--esh-dark-text);
}

html[data-esh-theme="dark"] .text-muted,
html[data-esh-theme="dark"] .text-secondary,
html[data-esh-theme="dark"] .esh-user-menu small,
html[data-esh-theme="dark"] .esh-notification-item small {
    color: var(--esh-dark-muted) !important;
}

html[data-esh-theme="dark"] .nav-link,
html[data-esh-theme="dark"] .dropdown-item,
html[data-esh-theme="dark"] .esh-user-menu-links a,
html[data-esh-theme="dark"] .wishlist a,
html[data-esh-theme="dark"] .cart a {
    color: var(--esh-dark-text) !important;
}

html[data-esh-theme="dark"] .dropdown-item:hover,
html[data-esh-theme="dark"] .esh-user-menu-links a:hover,
html[data-esh-theme="dark"] .esh-notification-item.is-unread {
    background-color: #273548;
}

html[data-esh-theme="dark"] .form-control::placeholder {
    color: var(--esh-dark-muted);
}

html[data-esh-theme="dark"] .esh-notification-toggle {
    color: var(--esh-dark-text);
}
