/* ChapterRoots palettes: four palettes x three sets.
   L = light theme, D = dark theme, K = the deep bands (proof bar, tree, final CTA, footer) in the
   LIGHT theme, so each palette's own color still shows on an ivory page.
   Hex only inside these four blocks: tools/palettes.test.mjs checks every text/background pair. */
:root, :root[data-palette="purple"] {   /* the default (owner, 2026-09-30): also what a page with no script paints */
  --L-ground:#f8f4ee; --L-ground-2:#efe7ee; --L-line:#ddd0dc; --L-on:#2a1440; --L-on-soft:#5a4a66;
  --L-paper:#fffcf8; --L-paper-2:#ffffff; --L-ink:#2a1440; --L-ink-soft:#5d4e69; --L-line-paper:#e6dbe3;
  --L-gold:#c2a04f; --L-gold-soft:#72561a; --L-gold-ink:#72561a; --L-gold-hover:#d9bd76; --L-btn-ink:#1f1027;
  --D-ground:#140b1c; --D-ground-2:#1d1128; --D-line:#33223f; --D-on:#f0e9f2; --D-on-soft:#b3a7b9;
  --D-paper:#190e23; --D-paper-2:#21132d; --D-ink:#f0e9f2; --D-ink-soft:#b6aabb; --D-line-paper:#382645;
  --D-gold:#cfae5c; --D-gold-soft:#e4ca8a; --D-gold-ink:#e4ca8a; --D-gold-hover:#e4ca8a; --D-btn-ink:#1f1027;
  --K-ground:#35174f; --K-ground-2:#43205f; --K-line:#553272; --K-on:#f5eef6; --K-on-soft:#cdbfd4;
  --K-gold:#cfae5c; --K-gold-soft:#e8d09a; --K-btn-ink:#1f1027;
}
:root[data-palette="forest"] {
  --L-ground:#f7f3ea; --L-ground-2:#eee7d7; --L-line:#dcd2bd; --L-on:#1c2b23; --L-on-soft:#4b5a51;
  --L-paper:#fffcf5; --L-paper-2:#ffffff; --L-ink:#1c2b23; --L-ink-soft:#52615a; --L-line-paper:#e6dece;
  --L-gold:#b08a3e; --L-gold-soft:#6f5418; --L-gold-ink:#6f5418; --L-gold-hover:#c7a458; --L-btn-ink:#16140c;
  --D-ground:#0e1814; --D-ground-2:#15231c; --D-line:#26382e; --D-on:#eee8d8; --D-on-soft:#a9b3a4;
  --D-paper:#132019; --D-paper-2:#192a21; --D-ink:#eee8d8; --D-ink-soft:#aab4a5; --D-line-paper:#2b3e33;
  --D-gold:#c9a55a; --D-gold-soft:#e0c584; --D-gold-ink:#e0c584; --D-gold-hover:#e0c584; --D-btn-ink:#14201a;
  --K-ground:#1f3d2f; --K-ground-2:#274a39; --K-line:#36574a; --K-on:#f3eee1; --K-on-soft:#c3cdbd;
  --K-gold:#c9a55a; --K-gold-soft:#e6cd92; --K-btn-ink:#14201a;
}
:root[data-palette="navy"] {
  --L-ground:#f6f3ea; --L-ground-2:#ebe6d8; --L-line:#d8d0bb; --L-on:#1b2440; --L-on-soft:#4e5770;
  --L-paper:#fdfaf2; --L-paper-2:#ffffff; --L-ink:#20283f; --L-ink-soft:#545b73; --L-line-paper:#ddd5bf;
  --L-gold:#c8a24a; --L-gold-soft:#7a5c17; --L-gold-ink:#7a5c17; --L-gold-hover:#e2c987; --L-btn-ink:#17202f;
  --D-ground:#131a2c; --D-ground-2:#1a2340; --D-line:#2a3452; --D-on:#eee9db; --D-on-soft:#a9a795;
  --D-paper:#161e33; --D-paper-2:#1c2640; --D-ink:#eee9db; --D-ink-soft:#aeac9b; --D-line-paper:#2e3957;
  --D-gold:#c8a24a; --D-gold-soft:#e2c987; --D-gold-ink:#e2c987; --D-gold-hover:#e2c987; --D-btn-ink:#17202f;
  --K-ground:#16203a; --K-ground-2:#1e2a4a; --K-line:#2f3b5c; --K-on:#eee9db; --K-on-soft:#b3b1a0;
  --K-gold:#c8a24a; --K-gold-soft:#e2c987; --K-btn-ink:#17202f;
}
:root[data-palette="crimson"] {
  --L-ground:#faf5ee; --L-ground-2:#f2e8de; --L-line:#e0d0c4; --L-on:#3a0f1a; --L-on-soft:#6a4a4f;
  --L-paper:#fffbf6; --L-paper-2:#ffffff; --L-ink:#3a0f1a; --L-ink-soft:#6b4c51; --L-line-paper:#eadcd0;
  --L-gold:#b88f5c; --L-gold-soft:#7d2230; --L-gold-ink:#7d2230; --L-gold-hover:#d9bc8e; --L-btn-ink:#2a0a12;
  --D-ground:#1a0c10; --D-ground-2:#241117; --D-line:#3a2027; --D-on:#f5ecdc; --D-on-soft:#bda9a0;
  --D-paper:#1f0f14; --D-paper-2:#28141a; --D-ink:#f5ecdc; --D-ink-soft:#c0aca3; --D-line-paper:#40242c;
  --D-gold:#d9bc8e; --D-gold-soft:#ead3ae; --D-gold-ink:#ead3ae; --D-gold-hover:#ead3ae; --D-btn-ink:#2a0a12;
  --K-ground:#5a1424; --K-ground-2:#6b1a2d; --K-line:#7d2b3d; --K-on:#f7eee0; --K-on-soft:#dcc6bd;
  --K-gold:#d9bc8e; --K-gold-soft:#ecd6b2; --K-btn-ink:#2a0a12;
}

/* ---- mapping: the site's existing token names, pointed at the right set ---- */
:root {
  --ground: var(--L-ground); --ground-2: var(--L-ground-2); --line-navy: var(--L-line);
  --on-navy: var(--L-on); --on-navy-soft: var(--L-on-soft);
  --paper: var(--L-paper); --paper-2: var(--L-paper-2); --ink: var(--L-ink); --ink-soft: var(--L-ink-soft); --line-paper: var(--L-line-paper);
  --gold: var(--L-gold); --gold-soft: var(--L-gold-soft); --gold-ink: var(--L-gold-ink); --gold-hover: var(--L-gold-hover); --btn-ink: var(--L-btn-ink);
  --chrome-paper: var(--L-ground-2); --node-on: color-mix(in srgb, var(--L-gold) 16%, #fff);
  --tree-glow: var(--K-ground-2); --logo: var(--L-gold-soft);
  --shadow: rgba(30, 30, 20, .28);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: var(--D-ground); --ground-2: var(--D-ground-2); --line-navy: var(--D-line);
  --on-navy: var(--D-on); --on-navy-soft: var(--D-on-soft);
  --paper: var(--D-paper); --paper-2: var(--D-paper-2); --ink: var(--D-ink); --ink-soft: var(--D-ink-soft); --line-paper: var(--D-line-paper);
  --gold: var(--D-gold); --gold-soft: var(--D-gold-soft); --gold-ink: var(--D-gold-ink); --gold-hover: var(--D-gold-hover); --btn-ink: var(--D-btn-ink);
  --chrome-paper: var(--D-ground-2); --node-on: color-mix(in srgb, var(--D-gold) 22%, var(--D-paper-2));
  --tree-glow: var(--D-ground-2); --logo: var(--D-gold);
  --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
/* Light theme: the proof bar, the tree band, the final CTA and the footer wear the palette's deep
   color, so the brand color still shows on an ivory page. */
:root:not([data-theme="dark"]) :is(.proof, .band-tree, .band-final, .foot) {
  --ground: var(--K-ground); --ground-2: var(--K-ground-2); --line-navy: var(--K-line);
  --on-navy: var(--K-on); --on-navy-soft: var(--K-on-soft);
  --gold: var(--K-gold); --gold-soft: var(--K-gold-soft); --gold-hover: var(--K-gold-soft); --btn-ink: var(--K-btn-ink);
  --logo: var(--K-gold);
  color: var(--on-navy); background-color: var(--ground);
}