/* --------------------------------------------------------------------
   themes.css — every colour in the application.

   Each theme is declared twice, against the same block:

     [data-theme="x"]  applies it to the whole app, from <html>
     .t-x              applies it to a single element

   The second selector is what makes the theme picker's swatches honest —
   each preview tile carries the real theme's variables rather than a
   hand-copied approximation that drifts the first time a colour changes.

   The `--page-*` variables describe the reading surface inside the epub.js
   iframe. settings.js reads their computed values and registers them with
   the rendition, so the book page and the app chrome can never disagree
   about what the current theme looks like.

   Themes are grouped light-first, and `--dark` is 1 on dark themes so
   settings.js can flip `color-scheme` for form controls and scrollbars.
   -------------------------------------------------------------------- */

/* ================================================================== */
/* Taper — the identity themes                                        */
/* ================================================================== */

/*
 * These two are the product. The seventeen below them are preferences.
 *
 * The distinction is worth keeping in mind when changing anything here: in
 * `taper-light` and `taper-dark`, amber means the reading position and nothing
 * else, and `--accent` is deliberately a neutral ink so that nothing ordinary
 * can ever be the flame's colour. The older themes make no such promise — they
 * were built to be comfortable to read in, which is a different job, and some
 * of them have a blue or a green accent that would fight the mark. That is
 * allowed. They are somebody's chosen reading light, not Taper's identity.
 *
 * `--flame` and `--flame-core` are set in tokens.css for every theme, so the
 * boundary is amber wherever you are.
 */

[data-theme="taper-light"], .t-taper-light {
  --dark: 0;
  /* Ground, then the page laid on it. Both from the brief. */
  --bg: #f4f0e6; --bg-2: #fbf8f0; --bg-3: #e9e3d4; --border: #d8d0bd;
  --fg: #1a1714; --fg-dim: #6b6459;
  /* Ink, not amber. See the note at the top of tokens.css. */
  --accent: #2a251f; --accent-fg: #fbf8f0; --selection: #e7dcc2;
  /* Kept muted: these mark genuinely destructive actions, nothing else. */
  --danger: #8f3a2a; --ok: #46663f;
  --shadow: 0 8px 26px rgb(60 48 28 / 0.13);
  --page-bg: #fbf8f0; --page-fg: #1a1714; --page-link: #5c5348;
  --page-rule: #ded6c5; --page-code-bg: #ece5d5; --page-code-fg: #38322a;
}

[data-theme="taper-dark"], .t-taper-dark {
  --dark: 1;
  --bg: #14110f; --bg-2: #1c1816; --bg-3: #262120; --border: #332d29;
  --fg: #e8dfc9; --fg-dim: #9a9081;
  --accent: #e8dfc9; --accent-fg: #14110f; --selection: #3a3128;
  --danger: #cf7361; --ok: #86ab7c;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.5);
  --page-bg: #1c1816; --page-fg: #e8dfc9; --page-link: #b7ad98;
  --page-rule: #332d29; --page-code-bg: #242020; --page-code-fg: #d3c9b4;
}

/* ================================================================== */
/* Light                                                              */
/* ================================================================== */

[data-theme="paper"], .t-paper {
  --dark: 0;
  --bg: #f4f1ea; --bg-2: #fbf9f4; --bg-3: #ebe6db; --border: #d9d2c4;
  --fg: #23201b; --fg-dim: #6d6659;
  --accent: #7a5c2e; --accent-fg: #fdfbf6; --selection: #e4d6b4;
  --danger: #9b3b2c; --ok: #3f6b45;
  --shadow: 0 8px 26px rgb(60 50 30 / 0.14);
  --page-bg: #f7f4ed; --page-fg: #23201b; --page-link: #6b5324;
  --page-rule: #ddd5c6; --page-code-bg: #ece7db; --page-code-fg: #3b352b;
}

[data-theme="white"], .t-white {
  --dark: 0;
  --bg: #f2f2f3; --bg-2: #ffffff; --bg-3: #e9e9eb; --border: #d6d6d9;
  --fg: #17181a; --fg-dim: #67696e;
  --accent: #2f5bd0; --accent-fg: #ffffff; --selection: #cfdcff;
  --danger: #b02a1f; --ok: #26714a;
  --shadow: 0 8px 26px rgb(20 20 25 / 0.12);
  --page-bg: #ffffff; --page-fg: #17181a; --page-link: #2f5bd0;
  --page-rule: #e2e2e5; --page-code-bg: #f2f2f4; --page-code-fg: #2a2c30;
}

[data-theme="sepia"], .t-sepia {
  --dark: 0;
  --bg: #ece0c8; --bg-2: #f6ecd8; --bg-3: #e2d4b7; --border: #cdbb96;
  --fg: #3b2f1c; --fg-dim: #675940;
  --accent: #8a5a1e; --accent-fg: #fdf6e7; --selection: #e0c58c;
  --danger: #96351f; --ok: #4a6a36;
  --shadow: 0 8px 26px rgb(90 70 35 / 0.18);
  --page-bg: #f4ead3; --page-fg: #3b2f1c; --page-link: #7d5117;
  --page-rule: #d8c8a5; --page-code-bg: #e7dabc; --page-code-fg: #443722;
}

[data-theme="cream"], .t-cream {
  --dark: 0;
  --bg: #f6f1e3; --bg-2: #fdfaf0; --bg-3: #eee7d4; --border: #ded5bd;
  --fg: #2c2921; --fg-dim: #6b6554;
  --accent: #4f6b3a; --accent-fg: #fbfdf6; --selection: #dee7bf;
  --danger: #9c3a2a; --ok: #3f6b45;
  --shadow: 0 8px 26px rgb(70 65 40 / 0.13);
  --page-bg: #fcf8ec; --page-fg: #2c2921; --page-link: #4a6437;
  --page-rule: #e4dcc6; --page-code-bg: #f0ead8; --page-code-fg: #3a362b;
}

[data-theme="parchment"], .t-parchment {
  --dark: 0;
  --bg: #e8ddbf; --bg-2: #f3e9cd; --bg-3: #ddd0ad; --border: #c7b58c;
  --fg: #3a3122; --fg-dim: #62563b;
  --accent: #8c6a24; --accent-fg: #fbf4dd; --selection: #dcc68d;
  --danger: #93361c; --ok: #4d6a2f;
  --shadow: 0 8px 26px rgb(95 80 40 / 0.2);
  --page-bg: #f1e7c9; --page-fg: #3a3122; --page-link: #7d5d1c;
  --page-rule: #d3c49d; --page-code-bg: #e3d7b1; --page-code-fg: #423826;
}

[data-theme="linen"], .t-linen {
  --dark: 0;
  --bg: #eeece6; --bg-2: #f8f7f3; --bg-3: #e4e1d9; --border: #d2cec4;
  --fg: #26251f; --fg-dim: #636258;
  --accent: #56605a; --accent-fg: #f9faf8; --selection: #d9ddd3;
  --danger: #96392c; --ok: #3d6a4c;
  --shadow: 0 8px 26px rgb(50 50 40 / 0.12);
  --page-bg: #f6f5f0; --page-fg: #26251f; --page-link: #4d5a52;
  --page-rule: #dcd9d0; --page-code-bg: #eae8e1; --page-code-fg: #33322b;
}

[data-theme="moss"], .t-moss {
  --dark: 0;
  --bg: #e6ebe2; --bg-2: #f2f6ef; --bg-3: #dae1d5; --border: #c3ccbc;
  --fg: #202a20; --fg-dim: #576255;
  --accent: #3f6b45; --accent-fg: #f4f9f2; --selection: #cfe0c6;
  --danger: #94392b; --ok: #35603c;
  --shadow: 0 8px 26px rgb(40 60 40 / 0.14);
  --page-bg: #f0f4ed; --page-fg: #202a20; --page-link: #3a6340;
  --page-rule: #d3dccd; --page-code-bg: #e2e9dd; --page-code-fg: #2c352b;
}

[data-theme="rose"], .t-rose {
  --dark: 0;
  --bg: #f0e7e6; --bg-2: #faf3f2; --bg-3: #e6dad9; --border: #d5c4c3;
  --fg: #2b2322; --fg-dim: #6b5c5a;
  --accent: #8c4a52; --accent-fg: #fdf5f4; --selection: #ecd2d3;
  --danger: #9c3227; --ok: #4a6a4a;
  --shadow: 0 8px 26px rgb(80 50 50 / 0.14);
  --page-bg: #faf4f3; --page-fg: #2b2322; --page-link: #8a474f;
  --page-rule: #e2d2d1; --page-code-bg: #f0e5e4; --page-code-fg: #382e2d;
}

[data-theme="solarized-light"], .t-solarized-light {
  --dark: 0;
  --bg: #eee8d5; --bg-2: #fdf6e3; --bg-3: #e4ddc8; --border: #d2cbb4;
  --fg: #073642; --fg-dim: #516269;
  --accent: #1f72ac; --accent-fg: #fdf6e3; --selection: #d7d2bd;
  /* --ok darkened from #859900, which was 3:1 on this paper — too faint for small text. */
  --danger: #c22c29; --ok: #5f6d00;
  --shadow: 0 8px 26px rgb(60 70 60 / 0.14);
  --page-bg: #fdf6e3; --page-fg: #073642; --page-link: #1f72ac;
  --page-rule: #ded7c1; --page-code-bg: #eee8d5; --page-code-fg: #586e75;
}

[data-theme="contrast-light"], .t-contrast-light {
  --dark: 0;
  --bg: #ffffff; --bg-2: #ffffff; --bg-3: #ebebeb; --border: #000000;
  --fg: #000000; --fg-dim: #333333;
  --accent: #000000; --accent-fg: #ffffff; --selection: #ffe100;
  --danger: #a00000; --ok: #00560d;
  --shadow: none;
  --page-bg: #ffffff; --page-fg: #000000; --page-link: #0000cc;
  --page-rule: #000000; --page-code-bg: #f0f0f0; --page-code-fg: #000000;
}

/* ================================================================== */
/* Dark                                                               */
/* ================================================================== */

[data-theme="dusk"], .t-dusk {
  --dark: 1;
  --bg: #23252a; --bg-2: #2b2e34; --bg-3: #343840; --border: #3d414a;
  --fg: #dcdee3; --fg-dim: #9ea2ac;
  --accent: #8ba4d8; --accent-fg: #1a1c20; --selection: #3b4560;
  --danger: #e08074; --ok: #7fbb8c;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.5);
  --page-bg: #26282d; --page-fg: #d6d9df; --page-link: #94abdd;
  --page-rule: #3a3e46; --page-code-bg: #1e2024; --page-code-fg: #c3c7ce;
}

[data-theme="midnight"], .t-midnight {
  --dark: 1;
  --bg: #0f1420; --bg-2: #161d2c; --bg-3: #1e2637; --border: #2a3346;
  --fg: #ced6e4; --fg-dim: #8791a1;
  --accent: #6f9bea; --accent-fg: #0b0f18; --selection: #26365a;
  --danger: #e5786c; --ok: #6fbd8b;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.6);
  --page-bg: #121826; --page-fg: #c9d1e0; --page-link: #7ba6ef;
  --page-rule: #263044; --page-code-bg: #0b101a; --page-code-fg: #b7c0d1;
}

[data-theme="ink"], .t-ink {
  --dark: 1;
  --bg: #141414; --bg-2: #1c1c1c; --bg-3: #262626; --border: #333333;
  --fg: #d8d6d2; --fg-dim: #918e8a;
  --accent: #c79a55; --accent-fg: #151310; --selection: #3d3524;
  --danger: #d8756a; --ok: #78b083;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.65);
  --page-bg: #171717; --page-fg: #d2d0cc; --page-link: #c6995a;
  --page-rule: #2e2e2e; --page-code-bg: #101010; --page-code-fg: #bfbdb8;
}

[data-theme="slate"], .t-slate {
  --dark: 1;
  --bg: #1b2127; --bg-2: #222a31; --bg-3: #2b343d; --border: #364149;
  --fg: #d3dae0; --fg-dim: #92a0aa;
  --accent: #63a4b8; --accent-fg: #14191e; --selection: #2f4550;
  --danger: #dd8276; --ok: #74b795;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.55);
  --page-bg: #1e252b; --page-fg: #ccd4da; --page-link: #6fb0c4;
  --page-rule: #313b43; --page-code-bg: #161c21; --page-code-fg: #b6bec6;
}

[data-theme="nord"], .t-nord {
  --dark: 1;
  --bg: #2e3440; --bg-2: #3b4252; --bg-3: #434c5e; --border: #4c566a;
  --fg: #e5e9f0; --fg-dim: #b8bfcb;
  --accent: #88c0d0; --accent-fg: #2e3440; --selection: #4c566a;
  /* Nord's own red is 2.4:1 on its panels; its lighter aurora tone reads. */
  --danger: #e79ca1; --ok: #a3be8c;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.5);
  --page-bg: #323846; --page-fg: #e0e5ee; --page-link: #88c0d0;
  --page-rule: #4c566a; --page-code-bg: #2b313c; --page-code-fg: #d8dee9;
}

[data-theme="gruvbox"], .t-gruvbox {
  --dark: 1;
  --bg: #282828; --bg-2: #32302f; --bg-3: #3c3836; --border: #504945;
  --fg: #ebdbb2; --fg-dim: #b1a390;
  --accent: #d79921; --accent-fg: #282828; --selection: #504945;
  /* Gruvbox's bright red and green, not the dark ones, which were 2.4:1 here. */
  --danger: #fc6d5d; --ok: #b8bb26;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.55);
  --page-bg: #2c2b29; --page-fg: #e6d5ae; --page-link: #d79921;
  --page-rule: #504945; --page-code-bg: #1d2021; --page-code-fg: #d5c4a1;
}

[data-theme="solarized-dark"], .t-solarized-dark {
  --dark: 1;
  --bg: #002b36; --bg-2: #073642; --bg-3: #0b4250; --border: #12586a;
  --fg: #d7d2c0; --fg-dim: #9eaaaa;
  --accent: #2aa198; --accent-fg: #002b36; --selection: #0f4b5a;
  /* Lighter than Solarized's red, which was 2.8:1 on this blue. */
  --danger: #ff6f69; --ok: #a4b83a;
  --shadow: 0 10px 30px rgb(0 0 0 / 0.55);
  --page-bg: #03303c; --page-fg: #cfcab8; --page-link: #33a59c;
  --page-rule: #114c5c; --page-code-bg: #00252e; --page-code-fg: #93a1a1;
}

[data-theme="contrast-dark"], .t-contrast-dark {
  --dark: 1;
  --bg: #000000; --bg-2: #000000; --bg-3: #1a1a1a; --border: #ffffff;
  --fg: #ffffff; --fg-dim: #cccccc;
  --accent: #ffe100; --accent-fg: #000000; --selection: #005fcc;
  --danger: #ff6b5e; --ok: #57d97a;
  --shadow: none;
  --page-bg: #000000; --page-fg: #ffffff; --page-link: #ffe100;
  --page-rule: #ffffff; --page-code-bg: #111111; --page-code-fg: #ffffff;
}

/* ================================================================== */
/* Theme picker                                                       */
/* ================================================================== */

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--sp-2);
}

.theme-swatch {
  /* The tile paints itself with its own theme's variables, set by the .t-*
     class it carries, so these two lines describe every theme at once. */
  background: var(--page-bg);
  color: var(--page-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--sp-2);
  min-height: 58px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-1);
  text-align: start;
  font-size: var(--step--2);
  overflow: hidden;
}
.theme-swatch .rule { height: 2px; background: var(--page-fg); opacity: 0.55; border-radius: 1px; }
.theme-swatch .rule + .rule { width: 62%; }
/* Two lines if it needs them: cut to one, "High contrast" and "High contrast
   dark" both read "High contra…". */
.theme-swatch .name {
  color: var(--page-fg);
  opacity: 0.85;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.2;
}
.theme-swatch[aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* E-paper overrides any theme's contrast decisions: partial refresh on an
   e-ink panel turns mid-greys into mud, so the reading surface goes pure. */
[data-epaper] {
  --page-bg: #ffffff; --page-fg: #000000; --page-link: #000000;
  --page-rule: #000000; --page-code-bg: #f2f2f2; --page-code-fg: #000000;
  --selection: #d0d0d0;
}
/* Taper's own dark theme included — it was missing, so with e-paper on its page
   turned white while everything around it stayed dark. And a dark selection:
   the light grey from the block above put white text on pale grey. */
[data-epaper][data-theme="taper-dark"],
[data-epaper][data-theme="contrast-dark"],
[data-epaper][data-theme="ink"],
[data-epaper][data-theme="midnight"],
[data-epaper][data-theme="dusk"],
[data-epaper][data-theme="slate"],
[data-epaper][data-theme="nord"],
[data-epaper][data-theme="gruvbox"],
[data-epaper][data-theme="solarized-dark"] {
  --page-bg: #000000; --page-fg: #ffffff; --page-link: #ffffff;
  --page-rule: #ffffff; --page-code-bg: #121212; --page-code-fg: #ffffff;
  --selection: #505050;
}