/*
 * 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;
}

@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;
    }
}