/* Shared high-contrast theme tokens. Dark is the default; theme-light is explicit. */
:root {
    color-scheme: dark;
    --app-bg: #111820;
    --app-surface: #1b2530;
    --app-surface-soft: #222f3b;
    --app-surface-raised: #2a3947;
    --app-border: #465867;
    --app-text: #e7edf4;
    --app-muted: #b2c0cc;
    --app-link: #82c9ff;
    --app-accent: #176fae;
    --app-accent-hover: #0f5f99;
    --app-selected-bg: #173b55;
    --app-input-bg: #101820;
    --app-input-text: #f3f6f9;
    --app-input-border: #5b6e7e;
    --app-header-bg: #18222c;
    --app-header-text: #f5f8fb;
    --app-header-muted: #d0d9e2;
    --app-header-active: #304354;
    --app-success-bg: #173d2a;
    --app-success-text: #9ce5b7;
    --app-info-bg: #17354a;
    --app-info-text: #a9dcff;
    --app-warning-bg: #4a3514;
    --app-warning-text: #f5d48a;
    --app-danger-bg: #4b2025;
    --app-danger-text: #ffb4b9;
    --app-shadow-sm: 0 2px 8px #0000002e;
    --app-shadow-lg: 0 12px 32px #00000073;
}

html.theme-light {
    color-scheme: light;
    --app-bg: #edf2f6;
    --app-surface: #ffffff;
    --app-surface-soft: #f1f5f8;
    --app-surface-raised: #e2eaf1;
    --app-border: #aebdca;
    --app-text: #182a3a;
    --app-muted: #465f74;
    --app-link: #075f9b;
    --app-accent: #176fae;
    --app-accent-hover: #0f5f99;
    --app-selected-bg: #dcecf7;
    --app-input-bg: #ffffff;
    --app-input-text: #142536;
    --app-input-border: #8fa4b5;
    --app-header-bg: #dce5ed;
    --app-header-text: #13283a;
    --app-header-muted: #2d465a;
    --app-header-active: #c4d5e3;
    --app-success-bg: #d9f3e2;
    --app-success-text: #185b35;
    --app-info-bg: #dceef9;
    --app-info-text: #07567f;
    --app-warning-bg: #f8edcf;
    --app-warning-text: #74520b;
    --app-danger-bg: #f9dfe2;
    --app-danger-text: #8c2932;
    --app-shadow-sm: 0 2px 8px #52697d24;
    --app-shadow-lg: 0 12px 32px #52697d52;
}

body { transition: background-color .16s ease, color .16s ease; }
a { color: var(--app-link); }
input::placeholder, textarea::placeholder { color: var(--app-muted); opacity: 1; }
input:focus, textarea:focus, select:focus {
    border-color: var(--app-accent);
    outline: 2px solid color-mix(in srgb, var(--app-accent) 24%, transparent);
    outline-offset: 1px;
}
button:hover { background: var(--app-accent-hover); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--app-link); outline-offset: 2px; }
button:disabled, input:disabled, select:disabled { opacity: .62; cursor: not-allowed; }

.app-header-nav > a,
.app-nav-menu > summary { color: var(--app-header-muted); }
.app-header-nav > a:hover,
.app-nav-menu > summary:hover { color: var(--app-header-text); }
.app-nav-menu-panel > a { color: var(--app-text); }
.app-nav-menu-panel > a:hover { background: var(--app-surface-raised); color: var(--app-link); }
.app-mode-status { border-color: var(--app-border); color: var(--app-header-muted); }
.app-mode-status.is-research { border-color: #3ba6dd; color: var(--app-info-text); }
.app-theme-switch { color: var(--app-header-muted) !important; }
.app-theme-track { background: var(--app-surface-raised); }
.app-user-name { margin-right: 12px; color: var(--app-header-muted); }
.app-logout-button {
    padding: 8px 12px;
    border: 1px solid var(--app-border);
    background: var(--app-header-active);
    color: var(--app-header-text);
}
.app-logout-button:hover { background: var(--app-accent); }

.settings-heading p,
.settings-card-title p,
.mode-option small,
.settings-meta dt,
.session-list article span,
.home-hero p,
.home-metrics .metric small,
.file-import-form small,
.patient-match-status,
.patient-page-heading p,
.section-heading p,
.patient-demographics dt,
.empty-state,
.doctor-session-qr p { color: var(--app-muted); }
.page-icon,
.settings-card-title > span,
.patient-page-heading > span { background: var(--app-info-bg); color: var(--app-info-text); }
.mode-chip,
.session-status { background: var(--app-success-bg); color: var(--app-success-text); }
.mode-chip.is-research { background: var(--app-info-bg); color: var(--app-info-text); }
.settings-card {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    box-shadow: var(--app-shadow-sm);
}
.mode-option { border-color: var(--app-border); background: var(--app-surface-soft); }
.mode-option:has(input:checked) {
    border-color: var(--app-accent);
    background: var(--app-selected-bg);
}
.research-form fieldset,
.session-list article { border-color: var(--app-border); background: var(--app-surface-soft); }
.home-metrics .metric {
    border-color: var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text);
}
.home-metrics .metric > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--app-info-bg);
    color: var(--app-info-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}
.home-quick a { border-color: var(--app-border); background: var(--app-surface-soft); color: var(--app-link); }
.home-quick a:hover { border-color: var(--app-accent); background: var(--app-surface-raised); }
.import-submit a { color: var(--app-link); }
.clickable-row:hover { background: var(--app-surface-raised); }
.patient-demographics > div { background: var(--app-surface-soft); }
.doctor-session-qr { border-color: var(--app-border); background: var(--app-info-bg); }
.message.error { background: var(--app-danger-bg); color: var(--app-danger-text); }
.message.success { background: var(--app-success-bg); color: var(--app-success-text); }
html:not(.theme-light) .patient-match-status.is-loading { color: var(--app-info-text); }
html:not(.theme-light) .patient-match-status.is-found { color: var(--app-success-text); }
html:not(.theme-light) .patient-match-status.is-new { color: var(--app-warning-text); }
html:not(.theme-light) .patient-match-status.is-error { color: var(--app-danger-text); }

/* Patient module lives inside the CAD shell but follows the selected theme. */
html:not(.theme-light) .patient-module-workspace {
    border-color: var(--app-border);
    background: var(--app-bg);
    color: var(--app-text);
}
html:not(.theme-light) .patient-module-workspace > header,
html:not(.theme-light) .patient-module-demographics > div,
html:not(.theme-light) .patient-module-history article,
html:not(.theme-light) .patient-module-assets button {
    border-color: var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
}
html:not(.theme-light) .patient-module-workspace > header span,
html:not(.theme-light) .patient-module-demographics span { color: var(--app-muted); }

/* The image canvas remains black; surrounding controls switch with the application. */
html.theme-light .image-stage-toolbar,
html.theme-light .image-thumb-nav { background: #dbe5ed; color: #183247; }
html.theme-light .image-stage-toolbar button,
html.theme-light .image-thumb-nav > button { border: 1px solid #8da2b4; background: #f7fafc; color: #174d70; }
html.theme-light .image-tool-dock { background: #eef3f7; color: #1a3144; }
html.theme-light .image-dock-title { border: 1px solid #a8b8c6; background: #dce7f0; }
html.theme-light .image-dock-title small { color: #3f5c72; }
html.theme-light .image-tool-dock details { border-color: #a7b8c6; background: #f8fafc; }
html.theme-light .image-tool-dock summary { background: #dce7f0; color: #183247; }
html.theme-light .image-tool-dock p { color: #3f5c72; }

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

html .image-tool-dock label.image-display-control {
    grid-template-columns: 52px 34px minmax(0, 1fr);
    gap: 5px;
    margin: 7px 8px;
    white-space: nowrap;
}
html .image-tool-dock label.image-display-control output {
    color: #8dcfff;
    text-align: right;
    font-family: Consolas, monospace;
}
html .image-tool-dock label.image-display-control input[type='range'] {
    grid-column: 3;
    min-width: 0;
    min-height: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
html.theme-light .image-tool-dock label.image-display-control output { color: #075f9b; }