:root {
    --cw-bg: #f8fafc;
    --cw-surface: #ffffff;
    --cw-surface-2: #f1f5f9;
    --cw-text: #111827;
    --cw-muted: #6b7280;
    --cw-border: #dbe3ee;
    --cw-accent: #f4b85f;
}

html.dark-mode {
    --cw-bg: #0b1220;
    --cw-surface: #111827;
    --cw-surface-2: #1f2937;
    --cw-text: #e5e7eb;
    --cw-muted: #9ca3af;
    --cw-border: #2f3a4d;
    --cw-accent: #f4b85f;
    color-scheme: dark;
}

body {
    background: var(--cw-bg);
    color: var(--cw-text);
    transition: background-color 0.25s ease, color 0.25s ease;
}

html.dark-mode a {
    color: #dbeafe;
}

html.dark-mode .text-muted,
html.dark-mode .text-secondary {
    color: var(--cw-muted) !important;
}

html.dark-mode .bg-white,
html.dark-mode .card,
html.dark-mode .modal-content,
html.dark-mode .offcanvas,
html.dark-mode .dropdown-menu,
html.dark-mode .list-group-item,
html.dark-mode .accordion-item,
html.dark-mode .toast,
html.dark-mode .popover {
    background-color: var(--cw-surface) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-border) !important;
}

html.dark-mode .table,
html.dark-mode .table th,
html.dark-mode .table td {
    color: var(--cw-text) !important;
    border-color: var(--cw-border) !important;
}

html.dark-mode .table-light,
html.dark-mode .bg-light {
    background-color: var(--cw-surface-2) !important;
    color: var(--cw-text) !important;
}

html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text {
    background-color: var(--cw-surface-2) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-border) !important;
}

html.dark-mode .form-control::placeholder {
    color: #94a3b8 !important;
}

html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    border-color: var(--cw-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(244, 184, 95, 0.25) !important;
}

html.dark-mode .btn-light,
html.dark-mode .btn-outline-secondary {
    background-color: var(--cw-surface-2) !important;
    color: var(--cw-text) !important;
    border-color: var(--cw-border) !important;
}

html.dark-mode .btn-primary {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

html.dark-mode .border,
html.dark-mode hr {
    border-color: var(--cw-border) !important;
}

html.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: var(--cw-muted) !important;
}

html.dark-mode .badge.bg-light {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .cart-notification,
html.dark-mode .toast-notification {
    background: var(--cw-surface) !important;
    color: var(--cw-text) !important;
    border: 1px solid var(--cw-border) !important;
}

/* Product Detail Page */
html.dark-mode .product-detail-section,
html.dark-mode .product-tabs-section,
html.dark-mode .related-products-section {
    background: #0f172a !important;
}

html.dark-mode .product-gallery,
html.dark-mode .product-info,
html.dark-mode .tab-content,
html.dark-mode .product-card,
html.dark-mode .main_card,
html.dark-mode .product-info-card,
html.dark-mode .price-action-card,
html.dark-mode .parameters-accordion-section {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

html.dark-mode .main-image {
    background: #0b1220 !important;
}

html.dark-mode .product-title,
html.dark-mode .product-name,
html.dark-mode .section-title,
html.dark-mode .product-card-title a,
html.dark-mode .meta-label,
html.dark-mode .accordion-title {
    color: #f8fafc !important;
}

html.dark-mode .product-short-desc,
html.dark-mode .product-sku,
html.dark-mode .rating-count,
html.dark-mode .meta-value,
html.dark-mode .detail-label,
html.dark-mode .breadcrumb-item.active {
    color: #94a3b8 !important;
}

html.dark-mode .current-price,
html.dark-mode .product-card-current-price {
    color: #fbbf24 !important;
}

html.dark-mode .original-price,
html.dark-mode .product-card-original-price {
    color: #94a3b8 !important;
}

html.dark-mode .qty-btn,
html.dark-mode .option-value,
html.dark-mode .btn-wishlist {
    background: #1f2937 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark-mode .qty-btn:hover,
html.dark-mode .option-value:hover,
html.dark-mode .option-value.selected,
html.dark-mode .btn-add-to-cart,
html.dark-mode .btn-add-to-cart:hover {
    background: #f4b85f !important;
    border-color: #f4b85f !important;
    color: #111827 !important;
}

html.dark-mode .nav-tabs .nav-link {
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

html.dark-mode .nav-tabs .nav-link.active {
    background: #1f2937 !important;
    color: #f4b85f !important;
    border-color: #334155 !important;
}

html.dark-mode .accordion-button {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

html.dark-mode .accordion-button:not(.collapsed) {
    background: #334155 !important;
    color: #fff !important;
}

html.dark-mode .review-item {
    border-color: #334155 !important;
}

/* Category Products Page */
html.dark-mode .category-header {
    background: #0f172a !important;
}

html.dark-mode .category-header h1,
html.dark-mode .category-header .description,
html.dark-mode .results-count,
html.dark-mode .filter-title,
html.dark-mode .product-name a {
    color: #f3f4f6 !important;
}

html.dark-mode .store-sidebar,
html.dark-mode .store-toolbar,
html.dark-mode .product-card,
html.dark-mode .sort-dropdown select,
html.dark-mode .price-filter input {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
}

html.dark-mode .filter-section {
    border-bottom-color: #334155 !important;
}

html.dark-mode .category-filter-list li a,
html.dark-mode .rating-filter-list li a,
html.dark-mode .product-rating .review-count,
html.dark-mode .original-price {
    color: #9ca3af !important;
}

html.dark-mode .category-filter-list li a:hover,
html.dark-mode .category-filter-list li a.active,
html.dark-mode .rating-filter-list li a:hover,
html.dark-mode .rating-filter-list li a.active,
html.dark-mode .filter-title:hover,
html.dark-mode .current-price {
    color: #f4b85f !important;
}

html.dark-mode .product-info {
    background: #111827 !important;
}

html.dark-mode .product-image {
    background: #0b1220 !important;
}

html.dark-mode .action-btn,
html.dark-mode .select-options-btn,
html.dark-mode .apply-filter-btn,
html.dark-mode .clear-filters-btn {
    border-color: #334155 !important;
}

html.dark-mode .action-btn {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

html.dark-mode .action-btn:hover,
html.dark-mode .select-options-btn:hover,
html.dark-mode .apply-filter-btn,
html.dark-mode .clear-filters-btn:hover {
    background: #f4b85f !important;
    color: #111827 !important;
    border-color: #f4b85f !important;
}

html.dark-mode .no-products {
    background: #111827 !important;
    border-color: #334155 !important;
}

/* Cart Page */
html.dark-mode .cart-container,
html.dark-mode .cart-hero {
    background: #0f172a !important;
}

html.dark-mode .cart-page-header h1,
html.dark-mode .item-details h5,
html.dark-mode .summary-title,
html.dark-mode .item-total,
html.dark-mode .current-price {
    color: #f8fafc !important;
}

html.dark-mode .cart-item,
html.dark-mode .cart-summary,
html.dark-mode .promo-input input,
html.dark-mode .quantity-input {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
}

html.dark-mode .product-image,
html.dark-mode .item-image {
    background: #1f2937 !important;
}

html.dark-mode .product-sku,
html.dark-mode .product-attribute,
html.dark-mode .summary-row,
html.dark-mode .payment-methods small,
html.dark-mode .continue-shopping-link,
html.dark-mode .item-parameters,
html.dark-mode .original-price {
    color: #9ca3af !important;
}

html.dark-mode .quantity-btn,
html.dark-mode .promo-btn,
html.dark-mode .checkout-btn,
html.dark-mode .continue-shopping {
    background: #f4b85f !important;
    border-color: #f4b85f !important;
    color: #111827 !important;
}

html.dark-mode .promo-clear-btn,
html.dark-mode .remove-btn {
    background: #7f1d1d !important;
    color: #fecaca !important;
    border-color: #b91c1c !important;
}

html.dark-mode .summary-title,
html.dark-mode .summary-row.total,
html.dark-mode .promo-code {
    border-color: #334155 !important;
}

html.dark-mode .empty-cart {
    background: #111827 !important;
    border-color: #334155 !important;
}

html.dark-mode .empty-cart h3 {
    color: #f3f4f6 !important;
}

html.dark-mode .empty-cart p {
    color: #9ca3af !important;
}

/* Checkout Page */
html.dark-mode .checkout-container {
    background: #0f172a !important;
}

html.dark-mode .checkout-main,
html.dark-mode .order-summary,
html.dark-mode .address-card,
html.dark-mode .payment-option,
html.dark-mode .item-image {
    background: #111827 !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
}

html.dark-mode .checkout-section {
    border-bottom-color: #334155 !important;
}

html.dark-mode .section-title,
html.dark-mode .summary-title,
html.dark-mode .payment-details h4,
html.dark-mode .item-name {
    color: #f8fafc !important;
}

html.dark-mode .form-group label,
html.dark-mode .address-details,
html.dark-mode .payment-details p,
html.dark-mode .item-details,
html.dark-mode .summary-row,
html.dark-mode .item-quantity {
    color: #cbd5e1 !important;
}

html.dark-mode .form-control,
html.dark-mode select.form-control {
    background-color: #1f2937 !important;
    border-color: #334155 !important;
    color: #f3f4f6 !important;
}

html.dark-mode select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e5e7eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html.dark-mode .section-number,
html.dark-mode .place-order-btn {
    background: #f4b85f !important;
    color: #111827 !important;
}

html.dark-mode .summary-row.total,
html.dark-mode .summary-item,
html.dark-mode .summary-calculations {
    border-color: #334155 !important;
}

html.dark-mode .security-note {
    color: #9ca3af !important;
}