:root {
    color-scheme: light;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --background: #0d1117;
    --surface: #161b22;
    --surface-raised: #1f2630;
    --surface-subtle: #202731;
    --surface-muted: #2a323d;
    --text: #e6edf3;
    --text-muted: #aab4c0;
    --border: #39424e;
    --border-strong: #566170;
    --input-background: #11161d;
    --interactive-hover: #252e3a;
    --interactive-selected: #29345c;
    --disabled-background: #252b33;
    --disabled-text: #7f8996;
    --danger-text: #ffaaa5;
    --danger-background: #3a2024;
    --danger-border: #754047;
    --success-text: #9fd6ad;
    --success-background: #203629;
    --warning-text: #f0cf85;
    --warning-background: #3b321f;
    --primary: #91a2ff;
    --focus: #a9b6ff;
    --shadow: 0 0.45rem 1.25rem rgb(0 0 0 / 35%);
    --overlay: rgb(0 0 0 / 72%);

    --semantic-blue-surface: #1d3048;
    --semantic-green-surface: #203a2b;
    --semantic-red-surface: #412329;
    --semantic-purple-surface: #302746;
    --semantic-amber-surface: #3d321e;
    --semantic-teal-surface: #1d3838;
}

html,
body {
    background: var(--background);
    color: var(--text);
}

.app-theme-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: -0.75rem 0 1.25rem;
    padding: 0.5rem 0.75rem;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
}

.app-theme-switch {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    background: var(--surface-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 120ms ease;
}

.app-theme-switch::before {
    content: "";
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
    transition: transform 120ms ease;
}

.app-theme-switch:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.app-theme-switch:checked::before {
    transform: translateX(1.25rem);
    background: var(--surface);
}

.app-theme-switch:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

@media (max-width: 800px) {
    .app-theme-control {
        max-width: 15rem;
        margin: 0 0 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-theme-switch,
    .app-theme-switch::before {
        transition: none;
    }
}

:root[data-theme="dark"] .page {
    background: var(--surface);
}

:root[data-theme="dark"] :where(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    select,
    textarea
) {
    color: var(--text);
    background: var(--input-background);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    input,
    select,
    textarea
)::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

:root[data-theme="dark"] :where(
    input,
    select,
    textarea,
    button
):disabled {
    color: var(--disabled-text);
    background-color: var(--disabled-background);
    border-color: var(--border);
}

:root[data-theme="dark"] option {
    color: var(--text);
    background: var(--input-background);
}

:root[data-theme="dark"] :where(
    input[type="checkbox"],
    input[type="radio"]
) {
    accent-color: var(--primary);
}

:root[data-theme="dark"] .home-card:hover {
    box-shadow: var(--shadow);
}

/* Shared wiki surfaces */
:root[data-theme="dark"] :where(
    .pokemon-card,
    .pokemon-detail-panel,
    .reference-catalog-item,
    .reference-catalog-trigger,
    .reference-catalog-relations,
    .pokemon-reference-trigger,
    .pokemon-reference-retry,
    .reference-catalog-relations-retry,
    .reference-catalog-filter-group,
    .reference-catalog-filter-reset,
    .reference-catalog-move .reference-catalog-main-search,
    .catalog-shell-detail-region,
    .catalog-shell-status,
    .item-detail-dialog,
    .item-detail-dialog .reference-catalog-dialog__header,
    .item-detail-dialog .reference-catalog-dialog__close
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

:root[data-theme="dark"] :where(
    .pokemon-detail-header,
    .pokemon-variant-selector,
    .pokemon-detail-section,
    .pokemon-detail-team-action,
    .pokemon-reference-item,
    .pokemon-reference-detail,
    .reference-catalog-relations
) {
    border-color: var(--border);
}

:root[data-theme="dark"] :where(
    .pokemon-detail-list-item,
    .pokemon-detail-empty-icon,
    .pokemon-reference-detail,
    .reference-catalog-empty,
    .reference-catalog-pokemon-item,
    .reference-catalog-pokemon-relation-value,
    .pokemon-reference-field,
    .item-image-frame,
    .catalog-shell--move .pokemon-reference-field,
    .item-detail-dialog .pokemon-reference-field
) {
    background: var(--surface-subtle);
    border-color: var(--border);
}

:root[data-theme="dark"] :where(
    .pokemon-reference-trigger:hover,
    .pokemon-reference-trigger[aria-expanded="true"],
    .reference-catalog-trigger:hover,
    .reference-catalog-trigger[aria-pressed="true"]
) {
    background: var(--interactive-hover);
}

:root[data-theme="dark"] :where(
    .pokemon-card:hover,
    .pokemon-card-selected,
    .reference-catalog-item-selected
) {
    border-color: var(--primary);
    box-shadow: var(--shadow);
}

:root[data-theme="dark"] :where(
    .pokemon-card-number,
    .pokemon-detail-number,
    .pokemon-detail-empty,
    .pokemon-results-empty,
    .pokemon-reference-role,
    .pokemon-reference-field dt,
    .pokemon-reference-data dt,
    .reference-catalog-count,
    .reference-catalog-empty,
    .reference-catalog-relations-status,
    .reference-catalog-pokemon-number,
    .reference-catalog-pokemon-relation-label,
    .catalog-shell-empty-detail,
    .items-catalog .item-catalog-card__meta
) {
    color: var(--text-muted);
}

:root[data-theme="dark"] :where(
    .pokemon-search-label,
    .pokemon-filter-label,
    .reference-catalog-search-label,
    .pokemon-rarity-and-lower
) {
    color: var(--text);
}

:root[data-theme="dark"] :where(
    .pokemon-search-input,
    .pokemon-filter-select,
    .reference-catalog-search
) {
    color: var(--text);
    background: var(--input-background);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    .pokemon-filters-reset,
    .reference-catalog-filter-reset
) {
    color: var(--text);
    background: var(--surface-raised);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    .pokemon-filters-reset:hover,
    .reference-catalog-filter-reset:hover
) {
    background: var(--interactive-hover);
}

:root[data-theme="dark"] :where(
    .pokemon-filter-chip,
    .reference-catalog-filter-chip,
    .pokemon-variant-button
) {
    color: #c7d0ff;
    background: var(--interactive-selected);
    border-color: #5969aa;
}

:root[data-theme="dark"] :where(
    .pokemon-filter-chip:hover,
    .reference-catalog-filter-chip:hover,
    .pokemon-variant-button:hover
) {
    background: #34416f;
}

:root[data-theme="dark"] :where(
    .pokemon-reference-detail-error,
    .reference-catalog-record-not-found,
    .reference-catalog-relations-error,
    .pokemon-detail-team-feedback--error
) {
    color: var(--danger-text);
    background: var(--danger-background);
    border-color: var(--danger-border);
}

:root[data-theme="dark"] :where(
    .catalog-shell--move .reference-catalog-sidebar-details > summary,
    .catalog-shell--ability .reference-catalog-sidebar-details > summary,
    .catalog-shell--pokemon .pokemon-catalog-filter-details > summary,
    .items-catalog .reference-light-catalog__filters > summary,
    .reference-catalog-sidebar-content,
    .reference-light-catalog__filter-content,
    .catalog-shell--ability .reference-catalog-sidebar-content,
    .catalog-shell--pokemon .pokemon-catalog-filter-content
) {
    color: var(--text);
    background: var(--surface-subtle);
    border-color: var(--border);
}

:root[data-theme="dark"] .item-detail-dialog::backdrop {
    background: var(--overlay);
}

:root[data-theme="dark"] :where(
    .catalog-shell--move .move-category-indicator,
    .team-member-editor .move-category-indicator
) {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .catalog-shell--move
    .move-role-indicator {
    color: var(--warning-text);
    background: var(--warning-background);
    border-color: #725f32;
}

/* Team workspace and editor */
:root[data-theme="dark"] :where(
    .team-roster-panel,
    .team-member-workspace,
    .team-section,
    .team-member-sheet__panel,
    .team-member-editor--edit .team-editor-section,
    .team-member-workspace .team-editor-section,
    .team-member-editor__header,
    .team-editor-profile-tabs button:not(.team-editor-profile-tab-active),
    .team-editor-actions button,
    .team-transfer-actions button,
    .team-active-member button,
    .team-add-member,
    .team-member-actions button,
    .team-editor-move-item button,
    .team-editor-move-search-item button,
    .team-editor-move-catalog-error button,
    .team-editor-reference-selection button,
    .team-editor-reference-search-item button,
    .team-editor-reference-catalog-error button,
    .team-move-card,
    .team-move-card__remove,
    .team-editor-resource-maximum,
    .team-member-editor__badges > span
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
    box-shadow: none;
}

:root[data-theme="dark"] :where(
    .team-transfer-group--pokemon,
    .team-member-sheet__facts > div,
    .team-member-sheet__trainer-points,
    .team-member-editor .move-catalog-row__header,
    .team-member-editor .team-move-card__icons,
    .team-move-card__detail,
    .team-member-workspace .team-editor-actions-bottom,
    .team-column-separator,
    .team-column-tools
) {
    border-color: var(--border);
}

:root[data-theme="dark"] :where(
    .team-member-sheet__panel,
    .team-member-editor--edit .team-editor-section
) {
    background-image: linear-gradient(
        145deg,
        var(--surface-raised),
        var(--surface)
    );
}

:root[data-theme="dark"] :where(
    .team-page-status,
    .team-active-member,
    .team-roster-member,
    .team-editor-transformations,
    .team-editor-resource,
    .team-editor-resource-card,
    .team-editor-move-limit-status,
    .team-editor-move-feedback,
    .team-editor-move-catalog-error,
    .team-editor-move-item,
    .team-editor-move-search-item,
    .team-editor-reference-feedback,
    .team-editor-reference-catalog-error,
    .team-editor-reference-selection,
    .team-editor-reference-search-item,
    .team-member-workspace .team-editor-reference,
    .team-member-workspace .team-editor-assigned-moves,
    .team-member-workspace .team-editor-move-catalog,
    .team-move-card__detail,
    .team-active-slot-empty,
    .team-member-empty-mark
) {
    color: var(--text);
    background: var(--surface-subtle);
    border-color: var(--border);
}

:root[data-theme="dark"] :where(
    .team-member-select:hover,
    .team-member-selected
) {
    background: var(--interactive-selected);
    border-color: var(--primary);
}

:root[data-theme="dark"] :where(
    .team-summary,
    .team-transfer-label,
    .team-transfer small,
    .team-empty,
    .team-picker-help,
    .team-picker-selection,
    .team-member-identity span,
    .team-picker-count,
    .team-editor-profile-heading p,
    .team-editor-field small,
    .team-editor-move-identity small,
    .team-editor-move-result-count,
    .team-editor-moves-empty,
    .team-editor-move-catalog-status,
    .team-editor-reference-optional,
    .team-editor-reference-empty,
    .team-editor-reference-unavailable,
    .team-editor-reference-result-count,
    .team-editor-reference-catalog-status,
    .team-member-sheet__facts dt,
    .team-member-editor__identity > p:not(.team-member-editor__eyebrow),
    .team-editor-section-heading p,
    .team-editor-field > span,
    .team-editor-resource-maximum span,
    .team-editor-move-limit-source,
    .team-member-identity small,
    .team-action-help,
    .team-member-empty-state
) {
    color: var(--text-muted);
}

:root[data-theme="dark"] :where(
    .team-member-editor .move-catalog-row__metrics,
    .team-member-editor .move-catalog-row__metric
        + .move-catalog-row__metric::before
) {
    color: var(--text-muted);
}

:root[data-theme="dark"] :where(
    .team-page-status-error,
    .team-editor-transformation-warning,
    .team-editor-errors,
    .team-editor-move-limit-status,
    .team-editor-move-feedback-error,
    .team-editor-move-catalog-error,
    .team-editor-reference-feedback-error,
    .team-editor-reference-catalog-error
) {
    color: var(--danger-text);
    background: var(--danger-background);
    border-color: var(--danger-border);
}

:root[data-theme="dark"] :where(
    .team-editor-move-count-error,
    .team-editor-reference-required,
    .team-member-sheet__unavailable,
    .team-editor-field-error
) {
    color: var(--danger-text) !important;
}

:root[data-theme="dark"] .team-move-card__remove {
    color: var(--danger-text);
    background: var(--surface);
    border-color: var(--danger-border);
}

:root[data-theme="dark"] :where(
    .team-pokemon-picker input,
    .team-pokemon-picker select,
    .team-editor-field input,
    .team-editor-field select,
    .team-editor-field textarea,
    .team-member-workspace .team-editor-field input,
    .team-member-workspace .team-editor-field select,
    .team-member-workspace .team-editor-field textarea
) {
    color: var(--text);
    background: var(--input-background);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    .team-member-sheet__panel > h3,
    .team-member-editor--edit .team-editor-section > h3,
    .team-editor-resource-maximum output,
    .team-member-empty-state h2
) {
    color: var(--text);
}

:root[data-theme="dark"] :where(
    .team-member-sheet__wiki-action,
    .team-move-card--add,
    .team-editor-move-search-action,
    .team-member-editor__eyebrow
) {
    color: #aebaff;
}

:root[data-theme="dark"] .team-rating-control {
    border-color: var(--border);
}

:root[data-theme="dark"] .team-member-position {
    background: var(--surface-muted);
}

:root[data-theme="dark"] .pokemon-stat-dot-base {
    background: #7184ff;
}

:root[data-theme="dark"] .pokemon-stat-dot-reachable {
    background: #9aa5b2;
}

:root[data-theme="dark"] .pokemon-stat-dot-unreachable {
    background: #46515f;
}

:root[data-theme="dark"] :where(
    .team-rating__pip,
    .team-rating-control__pip,
    .team-member-resource__track
) {
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

/* Structured Effects keep semantic hues while using dark surfaces. */
:root[data-theme="dark"] .move-dynamic-effect {
    color: var(--text);
    background: var(--surface-raised);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--fixed-effect-operation,
    .move-dynamic-effect--stat-bypass,
    .move-dynamic-effect--type-operation,
    .move-dynamic-effect--recipient-source-defined
) {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--field-effect,
    .move-dynamic-effect--timing-marker,
    .move-dynamic-effect--damage-scaling,
    .move-dynamic-effect--rank-damage,
    .move-dynamic-effect--retaliation-damage,
    .move-dynamic-effect--fractional-hp-damage,
    .move-dynamic-effect--duration,
    .move-dynamic-effect--recipient-user
) {
    color: #c4d9ff;
    background: var(--semantic-blue-surface);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--persistent-effect,
    .move-dynamic-effect--leech,
    .move-dynamic-effect--revive-effect,
    .move-dynamic-effect--status-operation
) {
    color: var(--success-text);
    background: var(--semantic-green-surface);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--fixed-operation-remove,
    .move-dynamic-effect--battlefield-operation,
    .move-dynamic-effect--restriction-effect,
    .move-dynamic-effect--ko-effect,
    .move-dynamic-effect--self-damage,
    .move-dynamic-effect--faint-effect,
    .move-dynamic-effect--recipient-foe
) {
    color: #ffc1bd;
    background: var(--semantic-red-surface);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--stat-transform,
    .move-dynamic-effect--ability-operation
) {
    color: #d5c9ff;
    background: var(--semantic-purple-surface);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--item-operation,
    .move-dynamic-effect--status-operation-remove
) {
    color: var(--warning-text);
    background: var(--semantic-amber-surface);
}

:root[data-theme="dark"] :where(
    .move-dynamic-effect--resistance-stat-selection,
    .move-dynamic-effect--reaction
) {
    color: #b8e2de;
    background: var(--semantic-teal-surface);
}

:root[data-theme="dark"] .move-dynamic-effect__chance-visual--status {
    background: rgb(31 38 48 / 94%);
    box-shadow: 0 0 0 1px var(--border);
}

:root[data-theme="dark"] :where(
    .move-icon-relation,
    .move-icon-branch,
    .move-icon-composition__semantic--grouped,
    .move-icon-composition__target-semantic
) {
    border-color: var(--border-strong);
}

:root[data-theme="dark"] :where(
    .move-icon-relation__exceptions,
    .move-icon-relation__event-condition,
    .move-icon-relation__event-recipient,
    .move-icon-branch__caption,
    .move-icon-composition__target-caption,
    .catalog-shell--move .move-icon-composition--mini
        .move-icon-composition__mini-heading
) {
    color: var(--text-muted);
}

/* Extra scope keeps theme declarations above legacy nested selectors. */
:root[data-theme="dark"] .app-shell :where(
    input[type="text"],
    input[type="search"],
    input[type="number"],
    select,
    textarea
) {
    color: var(--text);
    background: var(--input-background);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .app-shell :where(
    .catalog-shell--move .reference-catalog-sidebar-details > summary,
    .catalog-shell--ability .reference-catalog-sidebar-details > summary,
    .catalog-shell--pokemon .pokemon-catalog-filter-details > summary,
    .items-catalog .reference-light-catalog__filters > summary
) {
    color: var(--text);
    background: var(--surface-subtle);
    border-color: var(--border);
}

:root[data-theme="dark"] .app-shell
    .catalog-shell--move .move-category-indicator {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .app-shell
    .catalog-shell--move
    .move-category-indicator[data-move-category="physical"] {
    background: var(--semantic-red-surface);
    border-color: #754047;
}

:root[data-theme="dark"] .app-shell
    .catalog-shell--move
    .move-category-indicator[data-move-category="special"] {
    background: var(--semantic-blue-surface);
    border-color: #486890;
}

:root[data-theme="dark"] .app-shell
    .catalog-shell--move
    .move-category-indicator[data-move-category="support"] {
    background: var(--semantic-green-surface);
    border-color: #477158;
}

:root[data-theme="dark"] .team-page :where(
    .team-transfer-actions button,
    .team-active-member button,
    .team-add-member,
    .team-member-actions button,
    .team-editor-profile-tabs button,
    .team-editor-actions button:not([type="submit"]),
    .team-editor-move-item button,
    .team-editor-move-search-item button,
    .team-editor-move-catalog-error button,
    .team-editor-reference-selection button,
    .team-editor-reference-search-item button,
    .team-editor-reference-catalog-error button
) {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .team-page
    .team-member-editor
    .team-move-card__toggle
    .move-category-indicator {
    color: var(--text);
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .team-page
    .team-member-editor
    .team-move-card__toggle
    .move-catalog-row__metrics,
:root[data-theme="dark"] .team-page
    .team-member-editor
    .team-move-card__toggle
    .move-catalog-row__metric
    + .move-catalog-row__metric::before {
    color: var(--text-muted);
}

/* Keep selected catalog records on dark surfaces. These selectors mirror
   the catalog-specific light rules so the later theme layer wins cleanly. */
:root[data-theme="dark"] .app-shell
    .catalog-shell--move
    .reference-catalog-trigger[aria-pressed="true"],
:root[data-theme="dark"] .app-shell
    .catalog-shell--ability
    .reference-catalog-trigger[aria-pressed="true"] {
    color: var(--text);
    background: var(--interactive-selected);
}

:root[data-theme="dark"] .app-shell
    .catalog-shell--move
    .pokemon-reference-detail
    > .pokemon-reference-fields
    > .pokemon-reference-field {
    color: var(--text);
    background: var(--surface-subtle);
    border-color: var(--border);
}

/* Filled Team pips must override the shared empty-pip dark surface. */
:root[data-theme="dark"] .team-page .team-rating__pip--filled,
:root[data-theme="dark"] .team-page .team-rating-control__pip--filled {
    background: #3187d7;
    border-color: #7184ff;
}

:root[data-theme="dark"] .team-page .team-member-sheet__wiki-action {
    color: var(--text);
    background: var(--surface-raised);
    border-color: var(--border-strong);
}

:root[data-theme="dark"] .team-page .team-member-sheet__wiki-action:hover {
    background: var(--interactive-hover);
}

:root[data-theme="dark"] .team-page .team-member-sheet__panel > h3,
:root[data-theme="dark"] .team-page
    .team-member-editor--edit
    .team-editor-section
    > h3 {
    color: var(--text);
}