/* Shared reading colors. The runtime checks the authored palette once per
   change; safe opaque pairs remain available before JavaScript runs. */
html[data-theme]:root {
    --theme-panel-solid: var(--panel-strong);
    --theme-readable-ink: var(--ink);
    --theme-readable-muted: var(--muted);
    --theme-readable-link: var(--ink);
    --theme-reading-surface: var(--panel-strong);
    --theme-control-readable: var(--panel-strong);
    --theme-control-hover-readable: var(--panel-strong);
    --theme-active-background: var(--panel-strong);
    --theme-on-active: var(--ink);
    --theme-success-ink: var(--ink);
    --theme-warning-ink: var(--ink);
    --theme-danger-ink: var(--ink);
    --text: var(--ink);
    --text-color: var(--ink);
    --muted-text: var(--muted);
}

/* Resolve aliases again on the body. Inheriting --text from an earlier theme
   or a dark-only fallback was enough to produce white text on Aurora's cards.
   Keep authored root tokens available to animated worlds and theme previews. */
html[data-theme]:root body {
    --panel-strong: var(--theme-panel-solid);
    color-scheme: var(--theme-control-scheme, normal);
    --ink: var(--theme-readable-ink);
    --muted: var(--theme-readable-muted);
    --text: var(--ink);
    --text-color: var(--ink);
    --muted-text: var(--muted);
    --panel-bg: var(--panel-strong);
    --input-bg: var(--theme-control-readable);
    color: var(--ink);
}
html[data-theme]:root:is([data-theme-world-contrast="1"], [data-contrast-preference="boost"]) body,
html[data-theme]:root body:is(.theme-opt-high-contrast, .accessibility-contrast-boost) {
    --panel: #fff;
    --panel-strong: #fff;
    color-scheme: light;
    --ink: #000;
    --muted: #000;
    --text: var(--ink);
    --text-color: var(--ink);
    --panel-bg: var(--panel-strong);
    --theme-reading-surface: #fff;
    --theme-control-readable: #fff;
    --theme-control-hover-readable: #fff;
    --theme-readable-link: #000;
    --theme-active-background: #000;
    --theme-on-active: #fff;
    --border: inherit;
    filter: none;
}

/* The reading sheet is local to content. Open gutters still show the selected
   background; changing scene brightness cannot wash out the text layer. */
html[data-theme]:root body :where(.panel, .card, .content-card,
    .admin-tile, .admin-record-card, .account-tab-panel, .account-settings-shell,
    .shop-card, .theme-card, .game-card, .support-ticket-card, .notice,
    .doc-guide-card, .server-summary-card, .backup-update-card, .receipt-card,
    .invoice-card, .transaction-card, .stat-card, .ninekpay-admin-card,
    .ninekpay-admin-queue-card, .admin-feature-rule-card, .kbot-hero, .kbot-card,
    .kbot-notice, .kbot-bot-card, .kbot-env-notice) {
    background: var(--theme-reading-surface) !important;
    color: var(--ink) !important;
}

/* Text-entry controls always use their matching readable surface. Native
   options need explicit pairs because their popup may be drawn opaquely. */
html[data-theme]:root body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
    select, textarea, .search-input, .form-control) {
    background: var(--theme-control-readable) !important;
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink);
}
html[data-theme]:root body :is(input, textarea)::placeholder {
    color: var(--muted) !important;
    -webkit-text-fill-color: var(--muted);
    opacity: 1;
}
html[data-theme]:root body :is(select option, select optgroup) {
    background: var(--panel-strong);
    color: var(--ink);
}
html[data-theme]:root body :is(input, textarea):autofill {
    color: var(--ink) !important;
    -webkit-text-fill-color: var(--ink) !important;
    box-shadow: 0 0 0 1000px var(--panel-strong) inset !important;
    caret-color: var(--ink);
}

/* Standard controls use a checked pair; custom component actions keep their
   own paired colors instead of receiving half of this generic rule. */
html[data-theme]:root body :is(.button:where(:not(.primary):not(.danger):not(.warn):not(.good)),
    .account-tab-link, [data-tab-link], .theme-local-tab, .admin-local-tab, .nav-card) {
    background: var(--theme-control-readable) !important;
    color: var(--ink) !important;
}
html[data-theme]:root body :is(.button:where(:not(.primary):not(.danger):not(.warn):not(.good)),
    .account-tab-link, [data-tab-link], .theme-local-tab, .admin-local-tab, .nav-card):hover {
    background: var(--theme-control-hover-readable) !important;
    color: var(--ink) !important;
}
html[data-theme]:root body :is(.button.primary, button.primary, .primary-action,
    .nav-link.active, .account-tab-link.is-active, .account-tab-link.active,
    [data-tab-link].is-active, [data-tab-link].active, .theme-local-tab.is-active,
    .admin-local-tab.is-active, .hybrid-choice.is-selected),
html[data-theme]:root body :is(.button.primary, button.primary, .primary-action,
    .nav-link.active, .account-tab-link.is-active, .account-tab-link.active,
    [data-tab-link].is-active, [data-tab-link].active, .theme-local-tab.is-active,
    .admin-local-tab.is-active, .hybrid-choice.is-selected):hover {
    background: var(--theme-active-background) !important;
    color: var(--theme-on-active) !important;
    text-shadow: none;
}
/* Fine print belongs to the button's foreground, not the page's muted color. */
html[data-theme]:root body :is(button, .button, .primary-action, .nav-link.active,
    .account-tab-link.is-active, .account-tab-link.active, [data-tab-link].is-active,
    [data-tab-link].active, .theme-local-tab.is-active, .admin-local-tab.is-active,
    .hybrid-choice.is-selected) :is(small, .muted, .form-help) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

/* Status text remains colorful only when that color is readable on the
   reading surface. This does not recolor product artwork or themed heroes. */
html[data-theme]:root body :is(.eyebrow, .section-kicker, .kbot-eyebrow) {
    color: var(--theme-readable-link) !important;
}
html[data-theme]:root body :is(.status-pill, .badge, .pill, .price-pill,
    .button.good, .button.warn, .button.danger) {
    background: var(--theme-reading-surface) !important;
    color: var(--ink) !important;
}
html[data-theme]:root body :is(.status-pill.good, .notice.success, .button.good) {
    color: var(--theme-success-ink) !important;
}
html[data-theme]:root body :is(.status-pill.warn, .notice.warning, .button.warn) {
    color: var(--theme-warning-ink) !important;
}
html[data-theme]:root body :is(.status-pill.danger, .notice.danger, .button.danger) {
    color: var(--theme-danger-ink) !important;
}

@media (forced-colors: active) {
    html[data-theme]:root {
        --theme-panel-solid: Canvas !important;
        --theme-readable-ink: CanvasText !important;
        --theme-readable-muted: CanvasText !important;
        --theme-readable-link: LinkText !important;
        --theme-reading-surface: Canvas !important;
        --theme-control-readable: Canvas !important;
        --theme-control-hover-readable: Canvas !important;
        --theme-active-background: Highlight !important;
        --theme-on-active: HighlightText !important;
        --theme-success-ink: CanvasText !important;
        --theme-warning-ink: CanvasText !important;
        --theme-danger-ink: CanvasText !important;
    }
    html[data-theme]:root body,
    html[data-theme]:root:is([data-theme-world-contrast="1"], [data-contrast-preference="boost"]) body,
    html[data-theme]:root body:is(.theme-opt-high-contrast, .accessibility-contrast-boost) {
        --panel: Canvas;
        --panel-strong: Canvas;
        --ink: CanvasText;
        --muted: CanvasText;
        --theme-reading-surface: Canvas;
        --theme-control-readable: Canvas;
        --theme-control-hover-readable: Canvas;
        --theme-readable-link: LinkText;
        --theme-active-background: Highlight;
        --theme-on-active: HighlightText;
    }
}
@media print {
    html[data-theme]:root {
        --theme-panel-solid: #fff !important;
        --theme-readable-ink: #000 !important;
        --theme-readable-muted: #333 !important;
        --theme-readable-link: #000 !important;
        --theme-reading-surface: #fff !important;
        --theme-control-readable: #fff !important;
        --theme-control-hover-readable: #fff !important;
        --theme-active-background: #fff !important;
        --theme-on-active: #000 !important;
        --theme-success-ink: #000 !important;
        --theme-warning-ink: #000 !important;
        --theme-danger-ink: #000 !important;
    }
}