/* Semantic colours shared by every page. Theme previews have their own palette. */
:root {
  color-scheme: light;
  --paper: #f5f4ef;
  --surface: #fffefa;
  --header-surface: #fffefa;
  --surface-soft: #f1f3ec;
  --surface-hover: #e9efe7;
  --ink: #252b31;
  --heading: #192a35;
  --muted: #515c61;
  --line: #dadfd9;
  --line-strong: #839e86;
  --input-bg: #fafbf7;
  --input-line: #84938b;
  --placeholder: #657169;
  --accent: #315446;
  --accent-soft: #e5eddf;
  --action: #315446;
  --action-hover: #203e32;
  --on-action: #fffefa;
  --focus: #477755;
  --focus-soft: #31544622;
  --brand-bg: #192a35;
  --brand-ink: #d9f49f;
  --hero-bg: #192a35;
  --hero-glow: #335248;
  --hero-ink: #fffefa;
  --hero-muted: #e2e9e2;
  --hero-accent: #d9f49f;
  --hero-action: #d9f49f;
  --hero-action-hover: #edf9cc;
  --hero-on-action: #192a35;
  --hero-outline: #92a49e;
  --hero-hover: #30493f;
  --decor: #a7bea7;
  --decor-soft: #a4cf9b66;
  --decor-glow: #dcf9ae33;
  --success-bg: #edf4e9;
  --success-ink: #315c38;
  --success-line: #c3d7be;
  --progress-bg: #fcf6e9;
  --progress-ink: #765719;
  --progress-line: #dfcfad;
  --paused-bg: #f0f3f7;
  --paused-ink: #52657b;
  --paused-line: #cbd5e2;
  --error-bg: #fcf0ed;
  --error-ink: #7b2d28;
  --error-line: #b85e54;
  --badge-bg: #192a35;
  --badge-ink: #fffefa;
  --cover-bg: #e9f0e6;
  --cover-ink: #496750;
  --cover-spine: #b3c8b7;
  --shadow-soft: #21362a08;
  --shadow: #192a351f;
  --shadow-deep: #192a3552;
  --scroll-thumb: #98a69b;
  --selection-bg: #d9e8cd;
  --selection-ink: #20352a;
}

:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #151c20;
  --surface: #202b30;
  --header-surface: #1b2429;
  --surface-soft: #1b2529;
  --surface-hover: #2a3937;
  --ink: #e2e8e3;
  --heading: #e7ede7;
  --muted: #b2bfb7;
  --line: #3c4c49;
  --line-strong: #6a8877;
  --input-bg: #182226;
  --input-line: #6a7f75;
  --placeholder: #a6b5ab;
  --accent: #b0d2b1;
  --accent-soft: #2d4036;
  --action: #42654f;
  --action-hover: #4d735a;
  --on-action: #f1f5ed;
  --focus: #b8d6a8;
  --focus-soft: #b8d6a833;
  --brand-bg: #2e463b;
  --brand-ink: #d1e8c7;
  --hero-bg: #192429;
  --hero-glow: #284535;
  --hero-ink: #e9f0e6;
  --hero-muted: #bdcfbf;
  --hero-accent: #b9d69f;
  --hero-action: #42654f;
  --hero-action-hover: #4d735a;
  --hero-on-action: #f1f5ed;
  --hero-outline: #66816e;
  --hero-hover: #2b4035;
  --decor: #718e72;
  --decor-soft: #94bb8052;
  --decor-glow: #a3ce7e1f;
  --success-bg: #283c30;
  --success-ink: #bdd8b6;
  --success-line: #48644e;
  --progress-bg: #3b3424;
  --progress-ink: #dfca96;
  --progress-line: #655735;
  --paused-bg: #293640;
  --paused-ink: #bcccdc;
  --paused-line: #465d70;
  --error-bg: #3a292a;
  --error-ink: #efb8b0;
  --error-line: #b37970;
  --badge-bg: #384d44;
  --badge-ink: #d9e8d8;
  --cover-bg: #293e35;
  --cover-ink: #bed0b9;
  --cover-spine: #5a7760;
  --shadow-soft: #060b0c29;
  --shadow: #060b0c47;
  --shadow-deep: #060b0c80;
  --scroll-thumb: #526c5e;
  --selection-bg: #486448;
  --selection-ink: #f0f5e9;
}

:root[data-theme="twilight"] {
  color-scheme: dark;
  --paper: #201c2d;
  --surface: #30283f;
  --header-surface: #292238;
  --surface-soft: #282235;
  --surface-hover: #3b304d;
  --ink: #e1d8e8;
  --heading: #eee6f3;
  --muted: #baacc8;
  --line: #4d3f5f;
  --line-strong: #8b73a0;
  --input-bg: #251f31;
  --input-line: #8a749b;
  --placeholder: #b1a1bd;
  --accent: #cfb0e3;
  --accent-soft: #443152;
  --action: #775591;
  --action-hover: #84609d;
  --on-action: #f6effb;
  --focus: #cda6e3;
  --focus-soft: #cda6e333;
  --brand-bg: #6f4d87;
  --brand-ink: #eee5f3;
  --hero-bg: #272035;
  --hero-glow: #49335b;
  --hero-ink: #eee6f3;
  --hero-muted: #c6b6d3;
  --hero-accent: #dac0e9;
  --hero-action: #775591;
  --hero-action-hover: #84609d;
  --hero-on-action: #f6effb;
  --hero-outline: #8b719d;
  --hero-hover: #3b2d4a;
  --decor: #b99961;
  --decor-soft: #b9996152;
  --decor-glow: #c8a76b1a;
  --success-bg: #293b37;
  --success-ink: #b9d4c5;
  --success-line: #4c6b5d;
  --progress-bg: #42372d;
  --progress-ink: #e0c998;
  --progress-line: #756045;
  --paused-bg: #31364b;
  --paused-ink: #c4c7e2;
  --paused-line: #5a6081;
  --error-bg: #462c39;
  --error-ink: #f1b9c6;
  --error-line: #b97e91;
  --badge-bg: #624579;
  --badge-ink: #eee1f5;
  --cover-bg: #3a3049;
  --cover-ink: #d7c1df;
  --cover-spine: #86704e;
  --shadow-soft: #130d1d33;
  --shadow: #130d1d52;
  --shadow-deep: #130d1d8c;
  --scroll-thumb: #786189;
  --selection-bg: #6b4d81;
  --selection-ink: #f5edf9;
}

/* Author colours can assume white paper. Preserve layout and emphasis in dark reading. */
:root:is([data-theme="night"], [data-theme="twilight"]) .reading-text [style] {
  color: inherit !important;
  background-color: transparent !important;
}

:root[data-theme="twilight"] .hero-art {
  color: var(--decor);
}

:root[data-theme="twilight"] :is(.work-card, .work-detail, .reading-page) {
  border-inline-start-color: var(--decor-soft);
}

:root[data-theme="twilight"] .hero {
  border: 1px solid var(--decor-soft);
}

:root[data-theme="twilight"] .catalog-eyebrow::before {
  margin-inline-end: 0.55em;
  color: var(--decor);
  content: "✦";
}

/* The MF mark has dark artwork and transparent letters. Keep it legible on dark controls. */
:root:is([data-theme="night"], [data-theme="twilight"]) :is(.auth-provider, .work-source) img {
  filter: brightness(3);
}