/* Semantic theme contract. Legacy --theme-* fallbacks preserve the exact light
   palette while migrating older components to shared dark roles. */
:root {
  color-scheme: light;
  --background: var(--paper, #f7f5ef);
  --surface: var(--page, #fffdf9);
  --surface-elevated: var(--page, #fffdf9);
  --surface-subtle: var(--paper2, #eeeae1);
  --text-primary: var(--ink, #29251f);
  --text-secondary: var(--ink2, #625c51);
  --text-muted: var(--ink3, #756a59);
  --border: var(--line, #e7e1d6);
  --border-strong: var(--line2, #d6cdbd);
  --accent: var(--clay, #93633e);
  --accent-muted: #e6d3ad;
  --button-primary: var(--ink, #29251f);
  --button-primary-text: var(--paper, #f7f5ef);
  --input-background: var(--surface);
  --hover: var(--surface-subtle);
  --active: var(--surface-subtle);
  --success: #42633b;
  --error: #a33828;
  --warning: #80571e;
  --success-surface: #e5ecdf;
  --error-surface: #f2e9e3;
  --warning-surface: #f3dfbc;
  --card: var(--surface);
}
html[data-appearance=dark] {
  color-scheme: dark;
  --paper: #211f1b;
  --paper2: #36312a;
  --page: #2b2823;
  --ink: #f0e9db;
  --ink2: #cec3b1;
  --ink3: #b5a790;
  --clay: #dfb787;
  --ochre: #d1ab73;
  --line: #494239;
  --line2: #796b58;
  --sage: #b1bd97;
  --gold: #d9b36a;
  --good: var(--success);
  --bad: var(--error);
  --muted: var(--text-secondary);
  --card: var(--surface);
  --accent: var(--clay);
  --soft: var(--surface-subtle);
  --surface-elevated: #322d26;
  --accent-muted: #51432f;
  --button-primary: #e6d3ad;
  --button-primary-text: #29251f;
  --input-background: #25221e;
  --hover: #40392f;
  --active: #51432f;
  --success: #b8cea3;
  --error: #f0ac98;
  --warning: #e5c28b;
  --success-surface: #303d2b;
  --error-surface: #493029;
  --warning-surface: #493c29;
  --shadow: 0 4px 22px #0002;
  --shadow-lg: 0 12px 35px #0004;
  --theme-surface: var(--surface);
  --theme-surface-subtle: var(--surface-subtle);
  --theme-text-primary: var(--text-primary);
  --theme-text-secondary: var(--text-secondary);
  --theme-text-muted: var(--text-muted);
  --theme-border: var(--border);
  --theme-border-strong: var(--border-strong);
  --theme-accent: var(--accent);
  --theme-accent-muted: var(--accent-muted);
  --theme-hover: var(--hover);
  --theme-active: var(--active);
  --theme-success: var(--success);
  --theme-error: var(--error);
  --theme-success-surface: var(--success-surface);
  --theme-error-surface: var(--error-surface);
  --theme-warning-surface: var(--warning-surface);
}
/* Component-local palettes must follow the same theme as the app shell. */
html[data-appearance=dark] .qm {
  --qm-ink: var(--text-primary); --qm-muted: var(--text-secondary);
  --qm-paper: var(--background); --qm-line: var(--border);
  --qm-sage: var(--surface-subtle); --qm-gold: var(--accent);
}
html[data-appearance=dark] .es {
  --es-paper: var(--surface); --es-border: var(--border);
  --es-muted: var(--text-secondary); --es-green: #344e42;
  --es-tint: var(--surface-subtle); --es-accent: var(--success);
}
html[data-appearance=dark] .ds { --ds-sage: var(--success); --ds-gold: var(--accent); }
html[data-appearance=dark] .pl-workspace { --pl-line: var(--border); --pl-paper: var(--surface); }
html[data-appearance=dark] :is(.premium-card,.premium-dialog) { border-color: var(--border-strong); }
.premium-price { color: var(--text-primary); }
.premium-benefits { color: var(--text-secondary); }
.premium-error { color: var(--error)!important; }
.premium-toggle { background: var(--surface-subtle); }
.premium-toggle button[aria-pressed=true],.premium-cta {
  background: var(--button-primary); color: var(--button-primary-text);
}
.premium-toggle button:hover:not([aria-pressed=true]) { background: var(--hover); color: var(--text-primary); }
.premium-cta:hover:not(:disabled) { box-shadow: 0 0 0 2px var(--accent); }
html[data-appearance=dark] .premium-toggle span { background: var(--accent-muted); color: var(--text-primary); }
html[data-appearance=dark] .premium-preview-fade { background: linear-gradient(transparent,var(--background)); }
html[data-appearance=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select) {
  background-color: var(--input-background); color: var(--text-primary); border-color: var(--border-strong);
}
html[data-appearance=dark] option { background: var(--input-background); color: var(--text-primary); }
html[data-appearance=dark] ::placeholder { color: var(--text-muted); opacity: 1; }
html[data-appearance=dark] input:autofill {
  box-shadow: 0 0 0 1000px var(--input-background) inset;
  -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary);
}
:is(button,a,input,select,textarea,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
html[data-appearance=dark] :is(button,input,select,textarea):disabled { opacity: .65; cursor: not-allowed; }
html[data-appearance=dark] :is(.tutor .tutor-primary,.tutor-progress button[aria-current=step],.qm-btn.qm-primary,.es .es-primary,.es-ladder .selected,.es-quote-words .selected) {
  background: var(--button-primary); color: var(--button-primary-text); border-color: var(--accent);
}
html[data-appearance=dark] :is(.tutor-cards .tutor-primary,.tutor-inline>.tutor-primary) {
  background: var(--surface); color: var(--text-primary); border-color: var(--border-strong);
}
html[data-appearance=dark] :is(.tutor .tutor-primary,.qm-btn.qm-primary,.es .es-primary):hover { background: var(--text-primary); color: var(--button-primary-text); }
html[data-appearance=dark] :is(.mv-modes .active,.kt-reader .mv-modes .active) { background: var(--button-primary); color: var(--button-primary-text); }
html[data-appearance=dark] .mv-spread { background: var(--surface); color: var(--text-primary); }
html[data-appearance=dark] :is(.mv-cover,.kt-library .mv-cover) { background: var(--surface-subtle); color: var(--text-primary); }
html[data-appearance=dark] .kt-reader .mv-bar { background: var(--surface); }
html[data-appearance=dark] .celebration-card { color: var(--text-primary); }
html[data-appearance=dark] :is(.honour-ribbon b,.image-unavailable) { color: var(--text-secondary); }
html[data-appearance=dark] .image-unavailable { background: var(--surface-subtle); }
/* The original artwork is never inverted, tinted or filtered by this theme. */
@media print {
  html[data-appearance=dark] { --paper:#fff; --page:#fff; --ink:#000; --ink2:#222; --ink3:#444; --muted:#222; --clay:#000; color-scheme:light; }
}
html[data-appearance=dark] .avatar { color: var(--button-primary-text); }
html[data-appearance=dark] .literary-nav .avatar { color: var(--text-primary); }
html[data-appearance=dark] .rb-extra .toc:is(.on,:hover) { color: var(--button-primary-text); }
html[data-appearance=dark] .ns-journey i { color: var(--text-muted); }
/* Multiply was designed for paper; use the unaltered image on dark pages. */
html[data-appearance=dark] :is(.mv-art img,.mv-portrait img,.mv-character-head img,.mv-cover img) { mix-blend-mode: normal; }
/* Reader chrome shares the global appearance in both modes. */
.kt-reader .mv-bar { background: var(--glass); }