/* Light mode (stage 3): overrides --tg-* token values + structural fixes. Every selector is scoped to html[data-theme="light"]; dark mode (no attribute) is untouched. See docs/desingterang.md */
html[data-theme="light"] {
    color-scheme: light;
    /* bg */
    --tg-bg-000000: #000000;
    --tg-bg-000000-a045: rgba(0,0,0,0.045);
    --tg-bg-000000-a200: rgba(0,0,0,0.04);
    --tg-bg-000000-a500: rgba(0,0,0,0.4);
    --tg-bg-000000-a550: rgba(0,0,0,0.55);
    --tg-bg-000000-a600: rgba(0,0,0,0.45);
    --tg-bg-000000-a650: rgba(0,0,0,0.45);
    --tg-bg-000000-a700: rgba(0,0,0,0.5);
    --tg-bg-000000-a800: rgba(0,0,0,0.5);
    --tg-bg-0d0d0d: #FFFFFF;
    --tg-bg-0f0f0f: #F7F5F0;
    --tg-bg-111111: #F7F5F0;
    --tg-bg-121212: #F7F5F0;
    --tg-bg-141414: #F7F5F0;
    --tg-bg-151515: #F7F5F0;
    --tg-bg-161616: #F5F4EF;
    --tg-bg-171717: #F5F4EF;
    --tg-bg-181818: #F2F0EA;
    --tg-bg-1a1a1a: #FFFFFF;
    --tg-bg-1b1b1b: #FFFFFF;
    --tg-bg-1c1c1c: #FFFFFF;
    --tg-bg-1e1e1e: #FFFFFF;
    --tg-bg-1e1e1e-a950: rgba(255,255,255,0.95);
    --tg-bg-1f1f1f: #FFFFFF;
    --tg-bg-202020: #FFFFFF;
    --tg-bg-222222: #F0EEE8;
    --tg-bg-232323-a980: rgba(255,255,255,0.98);
    --tg-bg-242424: #F0EEE8;
    --tg-bg-252525: #F0EEE8;
    --tg-bg-262626: #F0EEE8;
    --tg-bg-282828: #F0EEE8;
    --tg-bg-2a2a2a: #F0EEE8;
    --tg-bg-2c2c2c: #F0EEE8;
    --tg-bg-333333: #E4E0D6;
    --tg-bg-383838: #E4E0D6;
    --tg-bg-444444: #DDD8CC;
    --tg-bg-555555: #CFC9BC;
    --tg-bg-595959: #CFC9BC;
    --tg-bg-c0c0c0: #c0c0c0;
    --tg-bg-cccccc: #cccccc;
    --tg-bg-e0e0e0: #333333;
    --tg-bg-f4f4f4: #f4f4f4;
    --tg-bg-f8f8f8: #f8f8f8;
    --tg-bg-f9f9f9: #f9f9f9;
    --tg-bg-ffffff: #ffffff;
    --tg-bg-ffffff-a020: rgba(0,0,0,0.03);
    /* line */
    --tg-line-121212: #E4E0D6;
    --tg-line-1e1e1e: #E4E0D6;
    --tg-line-262626: #E4E0D6;
    --tg-line-282828: #E4E0D6;
    --tg-line-2a2a2a: #E4E0D6;
    --tg-line-2d2d2d: #E4E0D6;
    --tg-line-2e2e2e: #DDD8CC;
    --tg-line-2f2f2f: #DDD8CC;
    --tg-line-303030: #DDD8CC;
    --tg-line-333333: #DDD8CC;
    --tg-line-343434: #DDD8CC;
    --tg-line-353535: #DDD8CC;
    --tg-line-383838: #DDD8CC;
    --tg-line-3a3a3a: #DDD8CC;
    --tg-line-3d3d3d: #DDD8CC;
    --tg-line-3f3f3f: #DDD8CC;
    --tg-line-444444: #CFC9BC;
    --tg-line-484848: #CFC9BC;
    --tg-line-555555: #CFC9BC;
    --tg-line-666666: #BDB7A8;
    --tg-line-717171: #BDB7A8;
    --tg-line-cccccc: #cccccc;
    --tg-line-dddddd: #dddddd;
    --tg-line-ededed: #ededed;
    --tg-line-eeeeee: #eeeeee;
    --tg-line-f0f0f0: #f0f0f0;
    --tg-line-f8f8f8: #f8f8f8;
    --tg-line-ffffff: #ffffff;
    --tg-line-ffffff-a050: rgba(0,0,0,0.05);
    --tg-line-ffffff-a060: rgba(0,0,0,0.06);
    --tg-line-ffffff-a070: rgba(0,0,0,0.07);
    --tg-line-ffffff-a150: rgba(0,0,0,0.15);
    /* text */
    --tg-text-111111: #111111;
    --tg-text-121212: #121212;
    --tg-text-333333: #333333;
    --tg-text-444444: #444444;
    --tg-text-555555: #636363;
    --tg-text-666666: #636363;
    --tg-text-777777: #636363;
    --tg-text-888888: #636363;
    --tg-text-999999: #5F5F5F;
    --tg-text-a0a0a0: #5F5F5F;
    --tg-text-a9a9a9: #5F5F5F;
    --tg-text-aaaaaa: #5F5F5F;
    --tg-text-b0b0b0: #5F5F5F;
    --tg-text-b8b8b8: #5F5F5F;
    --tg-text-bbbbbb: #4A4A4A;
    --tg-text-c9c9c9: #4A4A4A;
    --tg-text-cccccc: #4A4A4A;
    --tg-text-d4af37: #7A5F0D;
    --tg-text-d4d4d4: #4A4A4A;
    --tg-text-d7d7d7: #4A4A4A;
    --tg-text-dcdcdc: #1F1F1F;
    --tg-text-dddddd: #1F1F1F;
    --tg-text-e0e0e0: #1F1F1F;
    --tg-text-e5e5e5: #1F1F1F;
    --tg-text-e6e6e6: #1F1F1F;
    --tg-text-ececec: #1F1F1F;
    --tg-text-f0f0f0: #1F1F1F;
    --tg-text-f1ca53: #6B5309;
    --tg-text-f2f2f2: #1F1F1F;
    --tg-text-f6be00: #7A5F0D;
    --tg-text-ffc107: #7A5F0D;
    --tg-text-ffffff: #111111;
}

/* ---------- Structural overrides (only what tokens cannot express); colors only ---------- */

/* Bootstrap utilities: .text-white / .text-light sat on dark surfaces, now on light ones.
   Not on coloured badges/buttons (they keep white) nor on photo overlays (restored below). */
html[data-theme="light"] .text-white:not(.badge):not(.btn):not(.bg-danger):not(.bg-success):not(.bg-primary),
html[data-theme="light"] .text-light:not(.badge):not(.btn) {
    color: var(--tg-text-ffffff) !important;
}
html[data-theme="light"] .text-muted,
html[data-theme="light"] .text-body-secondary {
    color: var(--tg-text-888888) !important;
}
html[data-theme="light"] .text-warning {
    color: var(--tg-text-ffc107) !important;
}
html[data-theme="light"] .text-danger {
    color: #B02A37 !important;
}
html[data-theme="light"] .text-success {
    color: #146C43 !important;
}
html[data-theme="light"] .text-info {
    color: #066C82 !important;
}
html[data-theme="light"] .badge.bg-warning,
html[data-theme="light"] .badge.bg-info,
html[data-theme="light"] .badge.bg-light {
    color: var(--tg-on-accent-111111) !important;
}
html[data-theme="light"] .btn-close,
html[data-theme="light"] .btn-close-white {
    filter: none !important;
}
html[data-theme="light"] .bg-dark {
    background-color: var(--tg-bg-1a1a1a) !important;
}
html[data-theme="light"] .border-dark {
    border-color: var(--tg-line-2d2d2d) !important;
}
html[data-theme="light"] .table-dark {
    --bs-table-color: var(--tg-text-e0e0e0);
    --bs-table-bg: var(--tg-bg-1e1e1e);
    --bs-table-border-color: var(--tg-line-2d2d2d);
    --bs-table-striped-color: var(--tg-text-e0e0e0);
    --bs-table-striped-bg: var(--tg-bg-222222);
    --bs-table-active-color: var(--tg-text-e0e0e0);
    --bs-table-active-bg: var(--tg-bg-2a2a2a);
    --bs-table-hover-color: var(--tg-text-e0e0e0);
    --bs-table-hover-bg: var(--tg-bg-2a2a2a);
    color: var(--tg-text-e0e0e0);
    border-color: var(--tg-line-2d2d2d);
}
html[data-theme="light"] .btn-outline-light {
    --bs-btn-color: var(--tg-text-e0e0e0);
    --bs-btn-border-color: var(--tg-line-444444);
    --bs-btn-hover-color: var(--tg-text-ffffff);
    --bs-btn-hover-bg: var(--tg-bg-222222);
    --bs-btn-hover-border-color: var(--tg-line-444444);
}

/* Form controls, placeholder, selection, autofill, native select list */
html[data-theme="light"] input.form-control::placeholder,
html[data-theme="light"] textarea.form-control::placeholder,
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: var(--tg-text-888888) !important;
    opacity: 1 !important;
}
html[data-theme="light"] ::selection {
    background: rgba(212, 175, 55, 0.35);
    color: #111111;
}
html[data-theme="light"] input:-webkit-autofill,
html[data-theme="light"] input:-webkit-autofill:hover,
html[data-theme="light"] input:-webkit-autofill:focus,
html[data-theme="light"] textarea:-webkit-autofill,
html[data-theme="light"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--tg-text-ffffff);
    caret-color: var(--tg-text-ffffff);
    box-shadow: 0 0 0 1000px var(--tg-bg-1a1a1a) inset;
}
html[data-theme="light"] select option {
    background-color: var(--tg-bg-1a1a1a);
    color: var(--tg-text-ffffff);
}

/* Template/admin literals that are unreadable on light surfaces */
html[data-theme="light"] .btn_1.gray.small,
html[data-theme="light"] .btn_1.gray.small:hover,
html[data-theme="light"] .add-item-title span {
    color: #0A58CA !important;
}
html[data-theme="light"] .btn_1.gray.small.text-danger,
html[data-theme="light"] .btn_1.gray.small.text-danger:hover {
    color: #B02A37 !important;
}
html[data-theme="light"] .btn_1.gray.small.text-success,
html[data-theme="light"] .btn_1.gray.small.text-success:hover {
    color: #146C43 !important;
}
html[data-theme="light"] .radar-badge-low {
    color: #664D03;
}
html[data-theme="light"] .radar-badge-zero {
    color: #842029;
}
html[data-theme="light"] .payment-proof-notice {
    color: #0F5132 !important;
}
html[data-theme="light"] .step label,
html[data-theme="light"] .autocomplete-loading {
    color: var(--tg-text-bbbbbb);
}
html[data-theme="light"] .payment-info-list {
    color: var(--tg-text-bbbbbb) !important;
}
html[data-theme="light"] .item_panel .price_panel .old_price,
html[data-theme="light"] .old_price {
    color: var(--tg-text-888888);
}
html[data-theme="light"] .item_panel .price_panel .percentage {
    background-color: #C62828;
}
html[data-theme="light"] header.version_1 .main_nav ul.top_tools > li a.cart_bt strong {
    color: var(--tg-on-accent-121212) !important;
}
html[data-theme="light"] .main_title span {
    color: rgba(212, 175, 55, 0.18) !important;
}

/* Inline style="..." literals (cannot be reached through tokens) */
html[data-theme="light"] [style*="#1a3a2a"] {
    background-color: #D1E7DD !important;
    color: #0F5132 !important;
    border-color: #146C43 !important;
}
html[data-theme="light"] [style*="#3a1a1a"] {
    background-color: #F8D7DA !important;
    color: #842029 !important;
    border-color: #B02A37 !important;
}
html[data-theme="light"] [style*="#2a2512"] {
    background: #FFF3CD !important;
    color: #664D03 !important;
}
html[data-theme="light"] [style*="color: #dc3545"],
html[data-theme="light"] [style*="color:#dc3545"] {
    color: #B02A37 !important;
}
html[data-theme="light"] [style*="color: #fd7e14"] {
    color: #9A4500 !important;
}
html[data-theme="light"] [style*="color: #ff6b6b"],
html[data-theme="light"] [style*="color:#ff6b6b"] {
    color: #B02A37 !important;
}

/* Text sitting on photos / dark overlays keeps its light colour */
html[data-theme="light"] .slide-text.white h2,
html[data-theme="light"] .slide-text.black h2 {
    color: #D4AF37 !important;
}
html[data-theme="light"] .slide-text.white p {
    color: #E0E0E0 !important;
}
html[data-theme="light"] .top_banner h1,
html[data-theme="light"] .top_banner p,
html[data-theme="light"] .top_banner .breadcrumbs ul li,
html[data-theme="light"] .top_banner .breadcrumbs ul li a,
html[data-theme="light"] .categories_grid a .wrapper h2,
html[data-theme="light"] .categories_grid a .wrapper p,
html[data-theme="light"] .all .slider .left,
html[data-theme="light"] .all .slider .right,
html[data-theme="light"] .all .slider-two .left,
html[data-theme="light"] .all .slider-two .right,
html[data-theme="light"] #productGrid.list-view .grid_item ul li a i {
    color: var(--tg-on-accent-ffffff) !important;
}

/* Footer: style.css hard-codes white text for the (now white) footer */
html[data-theme="light"] footer .contacts ul li,
html[data-theme="light"] footer .contacts ul li a,
html[data-theme="light"] footer .contacts ul li i,
html[data-theme="light"] footer .links ul li a {
    color: var(--tg-text-bbbbbb) !important;
}
html[data-theme="light"] footer .contacts ul li a:hover,
html[data-theme="light"] footer .links ul li a:hover {
    color: var(--tg-text-d4af37) !important;
}
html[data-theme="light"] footer hr {
    border-color: var(--tg-line-2d2d2d);
}

/* admin.css hard-codes bright gold (#f1c232) for this modal title */
html[data-theme="light"] #detailModal .modal-title {
    color: var(--tg-text-d4af37) !important;
}

/* customer-orders.css: neon status colours made for dark surfaces */
html[data-theme="light"] .status-pill-success {
    color: #146C43;
}
html[data-theme="light"] .status-pill-danger,
html[data-theme="light"] .btn-cancel-outline,
html[data-theme="light"] .btn-cancel-outline:hover {
    color: #B02A37;
}
html[data-theme="light"] .status-pill-info {
    color: #066C82;
}

/* Brand Logos in Light Mode (Option A: Monochromatic Dark) */
html[data-theme="light"] #brands img.owl-lazy,
html[data-theme="light"] #brands img.owl-lazy.invert-light {
    filter: brightness(0) !important;
    opacity: 0.6 !important;
    transition: opacity 0.3s ease;
}

html[data-theme="light"] #brands img.owl-lazy:hover,
html[data-theme="light"] #brands img.owl-lazy.invert-light:hover {
    opacity: 1 !important;
}

/* Back to Top in Light Mode */
html[data-theme="light"] #toTop {
    background-color: #ffffff !important;
    border: 1px solid #ddd !important;
    color: #111111 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

html[data-theme="light"] #toTop:hover {
    background-color: #f6be00 !important;
    color: #111111 !important;
    border-color: #f6be00 !important;
}

/* ---------- Typography & Contrast Refinements ---------- */

/* Typography: Crisp dark headings in light mode */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .dashboard-card-title,
html[data-theme="light"] .dashboard-welcome-banner h2,
html[data-theme="light"] footer h3 {
    color: #111111 !important;
}

/* Icon aksen pada judul kartu tetap emas brand */
html[data-theme="light"] .dashboard-card-title i,
html[data-theme="light"] .dashboard-welcome-banner i {
    color: #D4AF37 !important;
}

/* Table headers: Crisp slate dark with clean background */
html[data-theme="light"] .table thead th,
html[data-theme="light"] .box_account table.table thead th,
html[data-theme="light"] .box_account table thead tr th {
    background-color: #F0EEE8 !important;
    color: #18181B !important;
    font-weight: 600 !important;
    border-bottom: 2px solid #D4AF37 !important;
}

/* Subtext & muted descriptions: Sharp readable slate gray */
html[data-theme="light"] .text-muted,
html[data-theme="light"] .stat-desc,
html[data-theme="light"] small:not(.badge),
html[data-theme="light"] .dashboard-date-chip span {
    color: #475569 !important;
    font-weight: 500;
}

/* Warm rich amber-gold instead of dull mustard */
html[data-theme="light"] .text-warning {
    color: #B45309 !important;
}

/* Sidebar menu in light mode */
html[data-theme="light"] .sidebar .list-group-item {
    color: #262626 !important;
    font-weight: 500 !important;
}
html[data-theme="light"] .sidebar .list-group-item:hover {
    background-color: #F0EEE8 !important;
    color: #111111 !important;
}
html[data-theme="light"] .sidebar .list-group-item.active {
    background: linear-gradient(45deg, #f6be00, #ffdb58) !important;
    color: #111111 !important;
    font-weight: 600 !important;
    border-left: none !important;
    box-shadow: 0 4px 12px rgba(246, 190, 0, 0.3) !important;
}
html[data-theme="light"] .sidebar .list-group-item.active i {
    color: #111111 !important;
}

/* Badges in tables */
html[data-theme="light"] .table .badge.text-warning {
    background-color: #FFF3CD !important;
    color: #856404 !important;
    border-color: #FFEBAA !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .table .badge.bg-dark {
    background-color: #E2E8F0 !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
    font-weight: 500 !important;
}

/* Footer text and links */
html[data-theme="light"] footer .contacts ul li,
html[data-theme="light"] footer .contacts ul li a,
html[data-theme="light"] footer .links ul li a {
    color: #2D3748 !important;
}
html[data-theme="light"] footer .contacts ul li a:hover,
html[data-theme="light"] footer .links ul li a:hover {
    color: #D4AF37 !important;
}