/*
 * Dark-mode contrast guardrail.
 *
 * This file is deliberately loaded last. Several feature stylesheets contain
 * light-theme status surfaces; without these semantic overrides a later
 * foreground rule can turn their copy nearly white on a pale background.
 */

html[data-color-scheme="dark"] body {
    --contrast-success-surface: #102f29;
    --contrast-success-border: #2f725f;
    --contrast-success-ink: #baf4d6;
    --contrast-success-muted: #d3eee3;
    --contrast-danger-surface: #351f27;
    --contrast-danger-border: #7e3a47;
    --contrast-danger-ink: #ffb5bf;
    --contrast-danger-muted: #ffd9de;
    --contrast-warning-surface: #362914;
    --contrast-warning-border: #765a2a;
    --contrast-warning-ink: #ffd995;
    --contrast-warning-muted: #ffe8b9;
    --contrast-info-surface: #152e4a;
    --contrast-info-border: #3e6389;
    --contrast-info-ink: #b8dcff;
    --contrast-info-muted: #d9eaff;
    --contrast-neutral-surface: #121b28;
    --contrast-neutral-raised: #172233;
    --contrast-neutral-border: #3b4a60;
    --contrast-neutral-ink: #f7f9fc;
    --contrast-neutral-muted: #c3cddd;
}

/* Shared notices and semantic status badges. */
html[data-color-scheme="dark"] body :is(
    .notice-success,
    .new-api-key-alert,
    .status-pill.success,
    .system-status-v6.success,
    .system-notice-v6.success,
    .traffic-alert-v9.success
) {
    border-color: var(--contrast-success-border) !important;
    background: var(--contrast-success-surface) !important;
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-error,
    .notice-danger,
    .status-pill.danger,
    .system-status-v6.danger,
    .system-notice-v6.danger,
    .traffic-alert-v9.danger
) {
    border-color: var(--contrast-danger-border) !important;
    background: var(--contrast-danger-surface) !important;
    color: var(--contrast-danger-ink) !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-warning,
    .api-security-warning,
    .system-warning-v6.compact,
    .status-pill.warning,
    .system-status-v6.warning
) {
    border-color: var(--contrast-warning-border) !important;
    background: var(--contrast-warning-surface) !important;
    color: var(--contrast-warning-ink) !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-info,
    .status-pill.info,
    .system-status-v6.info
) {
    border-color: var(--contrast-info-border) !important;
    background: var(--contrast-info-surface) !important;
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-success,
    .new-api-key-alert,
    .notice-error,
    .notice-danger,
    .notice-warning,
    .notice-info,
    .api-security-warning,
    .system-warning-v6.compact,
    .system-notice-v6,
    .traffic-alert-v9
) :is(h1, h2, h3, h4, b, strong, code, .ui-icon) {
    color: inherit !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-success,
    .new-api-key-alert
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-success-muted) !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-error,
    .notice-danger
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-danger-muted) !important;
}

html[data-color-scheme="dark"] body :is(
    .notice-warning,
    .api-security-warning,
    .system-warning-v6.compact
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-warning-muted) !important;
}

html[data-color-scheme="dark"] body :is(.notice-info) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-info-muted) !important;
}

html[data-color-scheme="dark"] body .new-api-key-alert > span {
    background: #16493d !important;
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body .new-api-key-alert :is(button, .button, .mock-secondary) {
    border-color: var(--contrast-success-border) !important;
    background: #173b32 !important;
    color: var(--contrast-success-ink) !important;
}

/* Account profile and security. The confirmation block matches the reported 2FA issue. */
html[data-color-scheme="dark"] body.account-workspace-surface .security-confirmation {
    border-color: var(--contrast-success-border) !important;
    background: var(--contrast-success-surface) !important;
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-confirmation > span {
    background: #16493d !important;
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-confirmation h3 {
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-confirmation p {
    color: var(--contrast-success-muted) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-guidance {
    border-color: var(--contrast-info-border) !important;
    background: var(--contrast-info-surface) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-guidance > span {
    background: #1b436d !important;
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-guidance :is(h1, h2, h3, b, strong) {
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-guidance :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-info-muted) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-guidance > a {
    color: #ffffff !important;
    text-decoration-color: #b8dcff !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .authenticator-enrollment {
    border-color: var(--contrast-info-border) !important;
    background: var(--contrast-info-surface) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .authenticator-qr-code {
    border-color: #b8dcff !important;
    background: #ffffff !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .authenticator-enrollment-copy .eyebrow {
    color: #8ec5ff !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .authenticator-enrollment-copy h3 {
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface :is(
    .authenticator-enrollment-copy > p:not(.eyebrow),
    .authenticator-enrollment-steps,
    .security-uri-details > p
) {
    color: var(--contrast-info-muted) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-secret-field > code {
    border-color: var(--contrast-neutral-border) !important;
    background: #0b1119 !important;
    color: var(--contrast-neutral-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-secret-actions .mock-secondary {
    border-color: var(--contrast-neutral-border) !important;
    background: var(--contrast-neutral-raised) !important;
    color: var(--contrast-neutral-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-secret-actions .mock-secondary:is(:hover, :focus-visible) {
    border-color: #8ec5ff !important;
    background: #1b436d !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-secret-status {
    color: var(--contrast-neutral-muted) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-state.enabled {
    border-color: var(--contrast-success-border) !important;
    background: var(--contrast-success-surface) !important;
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .security-state.disabled {
    border-color: var(--contrast-warning-border) !important;
    background: var(--contrast-warning-surface) !important;
    color: var(--contrast-warning-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface :is(
    .account-settings-notice,
    .account-profile-notice,
    .profile-notice
) {
    border-color: var(--contrast-info-border) !important;
    background: var(--contrast-info-surface) !important;
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface :is(
    .account-settings-notice,
    .account-profile-notice,
    .profile-notice
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-info-muted) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface :is(
    .account-profile-copy mark.online
) {
    border: 1px solid var(--contrast-success-border) !important;
    background: var(--contrast-success-surface) !important;
    color: var(--contrast-success-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface :is(
    .account-profile-details mark.pending,
    .profile-security-list mark.pending
) {
    border: 1px solid var(--contrast-warning-border) !important;
    background: var(--contrast-warning-surface) !important;
    color: var(--contrast-warning-ink) !important;
}

/* Empty and waiting states retain hierarchy instead of fading into the page. */
html[data-color-scheme="dark"] body :is(
    .empty-inline,
    .empty-state,
    .account-profile-empty,
    .account-settings-empty,
    .market-empty-state,
    .market-featured-empty,
    .market-tab-empty,
    .traffic-empty-v9,
    .system-empty-inline-v6,
    .warehouse-empty-state,
    .warehouse-data-empty,
    .warehouse-sales-empty,
    .payment-filter-empty
) {
    border-color: var(--contrast-neutral-border) !important;
    background: var(--contrast-neutral-surface) !important;
    color: var(--contrast-neutral-muted) !important;
}

html[data-color-scheme="dark"] body :is(
    .empty-inline,
    .empty-state,
    .account-profile-empty,
    .account-settings-empty,
    .market-empty-state,
    .market-featured-empty,
    .market-tab-empty,
    .traffic-empty-v9,
    .system-empty-inline-v6,
    .warehouse-empty-state,
    .warehouse-data-empty,
    .warehouse-sales-empty,
    .payment-filter-empty
) :is(h1, h2, h3, b, strong) {
    color: var(--contrast-neutral-ink) !important;
}

html[data-color-scheme="dark"] body :is(
    .empty-inline,
    .empty-state,
    .account-profile-empty,
    .account-settings-empty,
    .market-empty-state,
    .market-featured-empty,
    .market-tab-empty,
    .traffic-empty-v9,
    .system-empty-inline-v6,
    .warehouse-empty-state,
    .warehouse-data-empty,
    .warehouse-sales-empty,
    .payment-filter-empty
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-neutral-muted) !important;
}

html[data-color-scheme="dark"] body :is(
    .account-profile-empty,
    .account-settings-empty,
    .market-empty-state,
    .market-featured-empty,
    .traffic-empty-v9,
    .system-empty-inline-v6,
    .warehouse-empty-state,
    .warehouse-data-empty
) > :is(.ui-icon, span:first-child) {
    color: #8ec5ff !important;
}

/* Authentication and developer documentation callouts. */
html[data-color-scheme="dark"] body.marketplace-surface :is(
    .auth-security-note,
    .auth-notice:not(.notice-success):not(.notice-error):not(.notice-danger):not(.notice-warning):not(.notice-info)
) {
    border-color: var(--contrast-info-border) !important;
    background: var(--contrast-info-surface) !important;
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body.marketplace-surface :is(
    .auth-security-note,
    .auth-notice:not(.notice-success):not(.notice-error):not(.notice-danger):not(.notice-warning):not(.notice-info)
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-info-muted) !important;
}

/* Keep the profile security summary visually coherent with the surrounding dark panel. */
html[data-color-scheme="dark"] body.account-workspace-surface .profile-security-list > div {
    border-color: var(--contrast-neutral-border) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .profile-security-list > div > span {
    background: #1a334f !important;
    color: #b8dcff !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .profile-security-list b {
    color: var(--contrast-neutral-ink) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .profile-security-list small {
    color: var(--contrast-neutral-muted) !important;
}

html[data-color-scheme="dark"] body.account-workspace-surface .profile-security-list > div > a {
    color: #b8dcff !important;
}

html[data-color-scheme="dark"] body.customer-surface .developer-docs-page :is(
    .api-security-warning,
    .api-errors-and-notes > aside
) {
    border-color: var(--contrast-warning-border) !important;
    background: var(--contrast-warning-surface) !important;
    color: var(--contrast-warning-ink) !important;
}

html[data-color-scheme="dark"] body.customer-surface .developer-docs-page :is(
    .api-security-warning,
    .api-errors-and-notes > aside
) :is(p, small, span:not(.ui-icon)) {
    color: var(--contrast-warning-muted) !important;
}

/* Neutral admin surfaces that otherwise retain light hard-coded backgrounds. */
html[data-color-scheme="dark"] body.admin-surface :is(
    .system-card-foot-v6,
    .system-diagnostic-icon-v6,
    .warehouse-sales-list > a:hover
) {
    border-color: var(--contrast-neutral-border) !important;
    background: var(--contrast-neutral-raised) !important;
    color: var(--contrast-neutral-ink) !important;
}

html[data-color-scheme="dark"] body.admin-surface .system-warning-v6.compact :is(b, strong) {
    color: var(--contrast-warning-ink) !important;
}

html[data-color-scheme="dark"] body.admin-surface .system-warning-v6.compact :is(span, small, p) {
    color: var(--contrast-warning-muted) !important;
}

/* Keyboard focus stays obvious on each dark surface, including compact icon controls. */
html[data-color-scheme="dark"] body :is(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
    outline: 3px solid #8ec5ff !important;
    outline-offset: 3px;
}

/* External USDT payment details use the same neutral dark palette as the customer storefront. */
html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-invoice {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-surface);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-qr-column {
    border-color: var(--contrast-neutral-border);
    background: var(--store-bg-soft);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-qr-column .qr-placeholder {
    background: transparent !important;
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-detail {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-raised);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-amount-detail {
    border-color: color-mix(in srgb, var(--store-accent) 45%, var(--contrast-neutral-border));
    background: var(--store-accent-soft);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-amount {
    color: #ff91a0 !important;
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-credit-detail dd {
    color: var(--contrast-success-ink);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-network {
    color: var(--contrast-info-ink) !important;
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-recipient-value {
    border-color: var(--contrast-neutral-border);
    background: var(--store-bg);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-copy-value {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-raised);
    color: var(--contrast-neutral-ink);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-copy-value:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--store-accent) 45%, var(--contrast-neutral-border));
    background: var(--store-accent-soft);
    color: #ffb5bf;
}

/* The short-lived invoice timer is informational; keep it neutral until it expires. */
html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 :is(
    .external-usdt-expiry,
    .binance-internal-expiry
) {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-raised);
    color: var(--contrast-neutral-muted);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-invoice-countdown > strong {
    color: #ff91a0;
}

/* Supporting payment information stays quiet so it does not compete with the main invoice. */
html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-transfer-guidance {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-raised);
    color: var(--contrast-neutral-muted) !important;
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .external-usdt-transfer-guidance b {
    color: var(--contrast-neutral-ink);
}

/* Binance internal invoices use the storefront's neutral dark layers, not a separate blue theme. */
html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-invoice {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-surface);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-qr-column {
    border-color: var(--contrast-neutral-border);
    background: var(--store-bg-soft);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-qr-column .qr-placeholder {
    background: transparent !important;
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-invoice-details > p,
html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-invoice-details dt {
    color: var(--contrast-neutral-muted);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-invoice-details dd {
    color: var(--contrast-neutral-ink);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-detail {
    border-color: var(--contrast-neutral-border);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-note {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-raised);
    color: var(--contrast-neutral-muted) !important;
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .binance-internal-note :is(b, strong) {
    color: var(--contrast-neutral-ink);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 :is(
    .crypto-deposit-history,
    .crypto-deposit-history-scroll,
    .crypto-deposit-history th,
    .crypto-deposit-history td
) {
    border-color: var(--contrast-neutral-border);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history {
    background: var(--contrast-neutral-surface);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history > header {
    border-color: var(--contrast-neutral-border);
    background: var(--contrast-neutral-surface);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history > header h2 {
    color: var(--contrast-neutral-ink);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 :is(
    .crypto-deposit-history > header p,
    .crypto-deposit-history-count,
    .crypto-deposit-history td small,
    .crypto-deposit-history th
) {
    color: var(--contrast-neutral-muted);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history-count {
    border-color: var(--contrast-neutral-border);
    background: var(--store-bg);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history th,
html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history tbody tr:hover {
    background: var(--contrast-neutral-raised);
}

html[data-color-scheme="dark"] body.customer-surface .wallet-deposit-v4 .crypto-deposit-history td {
    color: var(--contrast-neutral-ink);
}

/* The product-creation media panel shares the existing neutral admin palette. */
html[data-color-scheme="dark"] body.admin-surface .admin-products-page .product-media-create {
    border-color: var(--admin-dark-line) !important;
    background: var(--admin-dark-surface) !important;
    color: var(--admin-dark-ink) !important;
}

html[data-color-scheme="dark"] body.admin-surface .admin-products-page .product-media-create > summary,
html[data-color-scheme="dark"] body.admin-surface .admin-products-page .product-media-create[open] > summary {
    border-color: var(--admin-dark-line) !important;
    background: var(--admin-dark-raised) !important;
    color: var(--admin-dark-ink) !important;
}

html[data-color-scheme="dark"] body.admin-surface .admin-products-page .product-media-create :is(
    summary small,
    .product-media-create-body small,
    .product-media-main-preview,
    .product-media-gallery-status
) {
    color: var(--admin-dark-muted) !important;
}

html[data-color-scheme="dark"] body.admin-surface .admin-products-page :is(
    .product-media-main-preview,
    .product-media-gallery-item
) {
    border-color: var(--admin-dark-line-strong) !important;
    background: var(--admin-dark-surface) !important;
}

html[data-color-scheme="dark"] body.admin-surface .admin-products-page .product-media-preview-mark {
    background: var(--admin-dark-accent-soft) !important;
    color: #ff9baa !important;
}

html[data-color-scheme="dark"] body.admin-surface .admin-products-page .product-media-gallery-remove {
    border-color: var(--contrast-danger-border) !important;
    background: var(--contrast-danger-surface) !important;
    color: var(--contrast-danger-ink) !important;
}

@media (max-width: 620px) {
    html[data-color-scheme="dark"] body.account-workspace-surface .authenticator-enrollment {
        grid-template-columns: 1fr;
    }

    html[data-color-scheme="dark"] body.account-workspace-surface .authenticator-qr-code {
        justify-self: center;
    }

    html[data-color-scheme="dark"] body.account-workspace-surface :is(.security-confirmation, .security-guidance) {
        align-items: start;
    }

    html[data-color-scheme="dark"] body.account-workspace-surface .security-guidance > a {
        grid-column: 2;
        justify-self: start;
    }
}