/*
 * AnaJak Store: light and dark colour modes (storefront and sign-in pages only, layouts/storefront).
 * ─────────────────────────────────────────────────────────────────────────────
 * One switch: <html data-theme="light|dark">, set before first paint by the inline script in the
 * layout <head> and changed by /js/ds-color-mode.js. Never loaded by the admin panel, the admin
 * login or the error pages, so ds-tokens.css keeps its light values for them.
 *
 * Light = the White & Blue tokens (ds-tokens.css) plus four small AA fixes.
 * Dark  = the same token names with night values (all under @media screen, so printing an
 *         invoice in dark mode prints the light version).
 * Payment windows (Bakong / Joyknea KHQR, ABA PayWay) stay light in both modes.
 * No filter is applied to any image, logo, QR code or text.
 */

/* ── 1. New semantic tokens (light values) and AA fixes ─────────────────────────────── */
:root {
    --ds-text-muted: #5F6F86;      /* AA on the soft blue (#64748B was 4.37:1 on #EFF6FF) */
    --ds-success: #15803D;         /* AA on the success badge (#16A34A was 3.15:1) */
    --ds-error: #D42222;           /* AA on the error notice (#DC2626 was 4.41:1) */
    /* --ds-bg-elevated, --ds-link-strong and --ds-focus: ds-nav.css :root repeats these three light values,
       because custom design mode does not load this file and the drawer still reads them. Keep both equal. */
    --ds-bg-elevated: #FFFFFF;     /* menus, popovers, sticky bars, carousel arrows */
    --ds-link: #2563EB;            /* brand-coloured text, links, icons */
    --ds-link-hover: #1D4ED8;
    --ds-link-strong: #1D4ED8;     /* text on the soft blue: info badges, notices */
    --ds-on-primary: #FFFFFF;      /* text on primary buttons */
    --ds-focus: #2563EB;
    --ds-input-bg: #FFFFFF;
    --ds-input-border: #8391A7;    /* 3.19:1 on white, WCAG 1.4.11 (#E2E8F0 was 1.23:1) */
    --ds-switch-off: #8391A7;      /* phone-menu switch track when off: 3:1+ to the row and to the thumb */
    --ds-placeholder: #64748B;     /* AA (#94A3B8 was 2.56:1 on white) */
    --ds-disabled-bg: #E2E8F0;
    --ds-disabled-text: #64748B;
    --ds-skeleton-a: #F1F5F9;
    --ds-skeleton-b: #E2E8F0;
    --ds-row-hover: #FBFDFF;
    --ds-veil: rgba(248, 250, 252, .78);
    --ds-badge-success-border: #BBF7D0;
    --ds-badge-error-border: #FECACA;
    --ds-badge-warning-border: #FDE68A;
    --ds-logo-tile: #FFFFFF;       /* Premium logo tiles stay light in both modes (black logos) */
    --kh-accent: rgba(37, 99, 235, .10);
    --kh-accent-strong: rgba(37, 99, 235, .08);
    /* legacy input border (ds-legacy-theme.css: var(--ds-border)): the game page's fields use the Tailwind class
       border-[var(--input-border)], which beats the element selectors below for <select> (Server ID on some games) */
    --input-border: var(--ds-input-border);
    color-scheme: light;
}
/* Form controls, both themes. ds-legacy-theme.css writes these colours as literals (border #E2E8F0,
   placeholder #94A3B8) and stays unchanged; this rule (same selector, loaded later) sets the AA values.
   Focus keeps the brand border (!important in ds-legacy-theme.css). */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]),
select,
textarea { border-color: var(--ds-input-border); }
input::placeholder, textarea::placeholder { color: var(--ds-placeholder); }
/* Footer "Follow us" line (shown when no social link is set), both themes: design-system.css draws it at
   rgba(168,188,208,.65) on the navy #0F2742 = 4.13:1; .72 gives 4.73:1 (AA). */
.ajf-muted { color: rgba(168, 188, 208, .72); }

/* ── 2. Dark values ─────────────────────────────────────────────────────────────────── */
@media screen {
html[data-theme="dark"] {
    color-scheme: dark;
    /* surfaces (Prompt B page #081321, surfaces #102238) */
    --ds-bg: #102238;
    --ds-bg-subtle: #081321;
    --ds-bg-elevated: #16304F;
    /* brand: fills keep #2563EB (white text 5.17:1); text uses the lighter #60A5FA */
    --ds-primary: #2563EB;
    --ds-primary-hover: #1D4ED8;
    --ds-primary-soft: #15325A;
    --ds-primary-border: #2B4C7E;
    --ds-link: #60A5FA;
    --ds-link-hover: #93C5FD;
    --ds-link-strong: #93C5FD;
    --ds-on-primary: #FFFFFF;
    --ds-focus: #60A5FA;
    /* neutrals (Prompt A text, muted, border) */
    --ds-border: #26364D;
    --ds-text: #F8FAFC;
    --ds-text-muted: #94A3B8;
    /* status */
    --ds-success: #4ADE80;
    --ds-success-soft: #0F2F2A;
    --ds-error: #F87171;
    --ds-error-soft: #341A26;
    --ds-warning: #FBBF24;
    --ds-warning-soft: #30280F;
    --ds-badge-success-border: rgba(74, 222, 128, .35);
    --ds-badge-error-border: rgba(248, 113, 113, .35);
    --ds-badge-warning-border: rgba(251, 191, 36, .35);
    /* controls and states */
    --ds-input-bg: #0B1A2E;
    --ds-input-border: #56709A;
    --ds-switch-off: #56709A;
    --ds-placeholder: #8A9AB2;
    --ds-disabled-bg: #1D2F49;
    --ds-disabled-text: #8A9AB2;
    --ds-skeleton-a: #13243C;
    --ds-skeleton-b: #1B3050;
    --ds-row-hover: #142843;
    --ds-veil: rgba(8, 19, 33, .74);
    --ds-logo-tile: #F1F5F9;
    --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --ds-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --ds-shadow-md: 0 12px 28px -12px rgba(0, 0, 0, .65);
    --ds-focus-ring: 0 0 0 3px rgba(96, 165, 250, .42);
    --kh-accent: rgba(191, 219, 254, .085);
    --kh-accent-strong: rgba(191, 219, 254, .07);
    /* mobile navigation drawer (ds-nav.css; light values in its :root) */
    --ds-nav-divider: rgba(148, 163, 184, .22);
    --ds-nav-hover: rgba(255, 255, 255, .06);
    --ds-nav-active: rgba(96, 165, 250, .16);
    --ds-nav-press: rgba(96, 165, 250, .26);
    --ds-backdrop: rgba(2, 6, 15, .60);
    --ds-drawer-shadow: -16px 0 40px -16px rgba(0, 0, 0, .70);
    /* legacy bridge (ds-legacy-theme.css) values that are literals there */
    --input-bg: var(--ds-input-bg);
    --input-border: var(--ds-input-border);
    --status-info: var(--ds-link);
    --color-info: var(--ds-link);
    --sticky-bar-shadow: rgba(0, 0, 0, .45);
    /* --is-dark stays 0 (ds-legacy-theme.css): the layout inverts the date-picker icon by it, and under
       color-scheme: dark Chrome already draws that icon light. */
}

/* ── 3. Hard-coded utility classes (outside the payment windows) ───────────────────── */
/* Brand-coloured text: light blue in dark mode (fills keep #2563EB). SVG shapes that use a
   text colour as their fill (game-page step numbers) are left alone. */
html[data-theme="dark"] :is(.text-ds-primary, .text-primary, .text-accent, .text-info, .text-custom-1, .text-custom-2, .text-custom-3,
    .text-accent-1, .text-accent-2, .text-accent-3, .text-\[var\(--brand-primary\)\], .text-\[var\(--brand-accent\)\],
    .text-\[var\(--brand-dark\)\], .text-\[var\(--ds-primary\)\]):not(svg):not(:is(#bakongModal, #joykneaModal) *) { color: var(--ds-link); }
html[data-theme="dark"] :is(.hover\:text-ds-primary, .hover\:text-custom-1, .hover\:text-custom-3, .hover\:text-primary,
    .hover\:text-\[var\(--brand-accent\)\], .hover\:text-\[var\(--brand-primary\)\]):hover { color: var(--ds-link-hover); }
html[data-theme="dark"] :is(.text-gray-400, .text-gray-500, .text-gray-600, .text-slate-500):not(:is(#bakongModal, #joykneaModal) *) { color: var(--ds-text-muted); }
html[data-theme="dark"] :is(.text-gray-700, .text-gray-800, .text-gray-900, .text-black):not(:is(#bakongModal, #joykneaModal) *) { color: var(--ds-text); }
html[data-theme="dark"] .bg-white:not(:is(#bakongModal, #joykneaModal) *):not(#bakongModal):not(#joykneaModal) { background-color: var(--ds-bg); }
html[data-theme="dark"] :is(.bg-gray-50, .bg-gray-100, .bg-slate-50):not(:is(#bakongModal, #joykneaModal) *) { background-color: var(--ds-bg-subtle); }
html[data-theme="dark"] :is(.border-gray-100, .border-gray-200, .border-gray-300):not(:is(#bakongModal, #joykneaModal) *) { border-color: var(--ds-border); }

/* ── 4. Components with literal colours ─────────────────────────────────────────────── */
/* design-system.css and ds-legacy-theme.css write these as literals. They stay unchanged: this file
   overrides them (higher specificity, loaded after them). */
html[data-theme="dark"] :focus-visible { outline-color: var(--ds-focus); }
/* Date fields (Order History filters): keep Chrome's light dark-scheme calendar icon; never invert it
   back to dark (layouts/storefront: filter: invert(var(--is-dark, 1))). */
html[data-theme="dark"] ::-webkit-calendar-picker-indicator { filter: none; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background-color: var(--ds-input-bg); border-color: var(--ds-input-border); }
html[data-theme="dark"] :is(#buyNowBtn, #buyNowBtnMobile):disabled { background-color: var(--ds-disabled-bg); color: var(--ds-disabled-text); }
html[data-theme="dark"] .ds-btn:disabled, html[data-theme="dark"] .ds-btn[aria-disabled="true"] { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); }
html[data-theme="dark"] :is(.ds-link, .ds-btn-ghost, .ds-section-title .ds-icon-tile, .ds-empty-icon) { color: var(--ds-link); }
html[data-theme="dark"] .ds-link:hover { color: var(--ds-link-hover); }
html[data-theme="dark"] :is(.ds-breadcrumb a:hover, .ds-icon-btn:hover) { color: var(--ds-link); }
html[data-theme="dark"] :is(.ds-badge-info, .ds-notice, .ds-btn-secondary:hover) { color: var(--ds-link-strong); }
html[data-theme="dark"] .ds-badge-success, html[data-theme="dark"] .ds-notice-success { border-color: var(--ds-badge-success-border); }
html[data-theme="dark"] .ds-badge-error, html[data-theme="dark"] .ds-notice-error { border-color: var(--ds-badge-error-border); }
html[data-theme="dark"] .ds-badge-warning, html[data-theme="dark"] .ds-notice-warning { border-color: var(--ds-badge-warning-border); }
html[data-theme="dark"] .ds-notice-success { color: var(--ds-success); }
html[data-theme="dark"] .ds-notice-error { color: var(--ds-error); }
html[data-theme="dark"] .ds-notice-warning { color: var(--ds-warning); }
html[data-theme="dark"] .ds-table tbody tr:hover td { background: var(--ds-row-hover); }
html[data-theme="dark"] .ds-skeleton { background-image: linear-gradient(90deg, var(--ds-skeleton-a) 25%, var(--ds-skeleton-b) 37%, var(--ds-skeleton-a) 63%); }
html[data-theme="dark"] .ds-overlay-label { background: var(--ds-veil); }
html[data-theme="dark"] .ds-product-media--contain { background: var(--ds-logo-tile); }
html[data-theme="dark"] .ds-summary-bar { box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .6); }
/* banner carousel arrows (components/banner-carousel) */
html[data-theme="dark"] :is(.hero-btn-prev, .hero-btn-next) { background: var(--ds-bg-elevated); border-color: var(--ds-border); color: var(--ds-text); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .6); }
/* payment logos on dark cards get a light chip (never a filter) */
html[data-theme="dark"] :is(.payment-method-btn, .ds-option) > img,
html[data-theme="dark"] .ds-option .ds-pay-logo { background: #FFFFFF; border-radius: 8px; padding: 3px; }

/* ── 5. Game page (CSS only; storefront/game/show.blade.php is owned by another workstream) ── */
html[data-theme="dark"] .product-card .product-price { color: var(--ds-link) !important; }
html[data-theme="dark"] .product-card.selected .product-price { color: var(--ds-link-hover) !important; }
/* admin-chosen package colours were picked for a white page: dark mode uses the theme surface and
   text, and keeps the admin border colour as the accent */
html[data-theme="dark"] .product-card { --custom-bg: initial !important; --custom-text: initial !important; }

/* ── 6. Payment windows stay light (QR quiet zone, KHQR branding, ABA PayWay) ───────── */
html[data-theme="dark"] :is(#bakongModal, #joykneaModal) {
    color-scheme: light;
    --ds-bg: #FFFFFF; --ds-bg-subtle: #F8FAFC; --ds-text: #0F172A; --ds-text-muted: #5F6F86; --ds-border: #E2E8F0;
}
html[data-theme="dark"] :is(#aba_checkout_sheet, .aba-checkout-desktop, .aba-checkout-mobile, .aba_checkout_open_mini_app, #aba_webservice_loading) {
    color-scheme: light;
    color: #0F172A;
}

/* ── 7. Theme switch: smooth, short, and off with reduced motion ───────────────────── */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; animation-timing-function: ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── 8. The toggle (header, ≥ 768 px) and the drawer switch (below 768 px) ──────────── */
/* hidden where it cannot work: no script (no data-theme), admin preview, custom design mode */
html:not([data-theme]) [data-theme-toggle], html[data-theme-lock] [data-theme-toggle] { display: none !important; }
.ds-theme-toggle .bi-sun { display: none; }
html[data-theme="dark"] .ds-theme-toggle .bi-sun { display: inline-block; }
html[data-theme="dark"] .ds-theme-toggle .bi-moon-stars { display: none; }
.ds-theme-toggle i { font-size: 16px; line-height: 1; }
.ds-theme-switch {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    margin-top: 10px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 12px;
    background: var(--ds-bg); color: var(--ds-text); font-size: .875rem; font-weight: 500; cursor: pointer; text-align: left;
}
/* track 3:1 or more against the row and against the white thumb, off and on (WCAG 1.4.11) */
.ds-theme-switch-track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--ds-switch-off); transition: background-color .2s ease; }
.ds-theme-switch-thumb {
    position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .3); display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #B45309; transition: transform .2s ease;
}
.ds-theme-switch-thumb .bi-moon-stars { display: none; }
.ds-theme-switch[aria-pressed="true"] .ds-theme-switch-track { background: var(--ds-primary); }
.ds-theme-switch[aria-pressed="true"] .ds-theme-switch-thumb { transform: translateX(18px); color: #1D4ED8; }
.ds-theme-switch[aria-pressed="true"] .ds-theme-switch-thumb .bi-sun { display: none; }
.ds-theme-switch[aria-pressed="true"] .ds-theme-switch-thumb .bi-moon-stars { display: inline-block; }
@media (prefers-reduced-motion: reduce) { .ds-theme-switch-track, .ds-theme-switch-thumb { transition: none; } }