/* themes.css — THE ONLY FILE TO EDIT TO CHANGE THE FEEL.
 *
 * Every colour and font on the site (and inside the drawings) is one of these tokens.
 * A theme is a block of tokens under [data-theme="name"]. To add one: copy a block, rename it,
 * change the values, and add an <option> for it in index.html's "Binding" select.
 * "By the hour" (auto) picks vellum in daylight and void after dark — see theme-boot.js.
 *
 * THE SPLASH'S JOURNEY (splash.js) walks the world south to north, one block per place:
 *   coast → plains → crystal → mountains → isles → curtain
 * blending every colour token between neighbours, so editing a block repaints that stretch.
 * Those six are the splash's; the Book's own bindings are vellum / void / verdant.
 */

:root {
  /* type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --size-body: 19px;
  --leading: 1.55;
  --radius: 14px;
}

/* ── Vellum — a scribe's page by daylight ── */
[data-theme="vellum"] {
  color-scheme: light;
  --bg: #f1e8d6;          /* the page */
  --bg-2: #e8dcc4;        /* the margin */
  --bg-3: #fbf6ea;        /* a raised leaf */
  --ink: #2a2017;
  --ink-soft: #6d5c47;
  --rule: #cdb994;
  --accent: #9a6b1f;      /* gilt */
  --accent-ink: #fbf6ea;
  --user: #e3d3b3;        /* Matt's lines */
  --void: #241a3a;
  --void-glow: #7a56d6;
  --sea: #2f6f74;  --crystal: #4f8f86;  --land: #a4482f;  --air: #6f8fb8;  --plains: #7f9a4e;
  --sky-low: #f6e7c4;  --sky-high: #c9d8e4;
  --grain: .06;
}

/* ── Coast — morning on the southern sea, before anything is wrong. The splash starts here. ── */
[data-theme="coast"] {
  color-scheme: light;
  --bg: #e6f0ee;
  --bg-2: #d8e7e4;
  --bg-3: #f4f9f7;
  --ink: #1c2a2d;
  --ink-soft: #4f6a6c;
  --rule: #b7cfcb;
  --accent: #a5711f;
  --accent-ink: #f4f9f7;
  --user: #d3e4e0;
  --void: #9cc8e2;        /* no curtain yet: the top of the sky is just sky */
  --void-glow: #c9b2ff;
  --sea: #2a8ea0;  --crystal: #5bb7a6;  --land: #c2683f;  --air: #86afd8;  --plains: #8db358;
  --sky-low: #fcebc9;  --sky-high: #b3dbee;
  --grain: .05;
}

/* ── Plains — the Verdant Plains at high summer: gold light on green ── */
[data-theme="plains"] {
  color-scheme: light;
  --bg: #e9ecd3;
  --bg-2: #dde3c3;
  --bg-3: #f6f8ea;
  --ink: #24301c;
  --ink-soft: #5a6b45;
  --rule: #c4cc9e;
  --accent: #93661b;
  --accent-ink: #f6f8ea;
  --user: #dfe5c8;
  --void: #a9cfe4;
  --void-glow: #c4a8ff;
  --sea: #2c8b98;  --crystal: #58b29f;  --land: #c0643d;  --air: #86acd6;  --plains: #7fae4e;
  --sky-low: #fbe6b4;  --sky-high: #bfdcea;
  --grain: .05;
}

/* ── Crystal — the Crystal Forest: glassy, cool, light through facets ── */
[data-theme="crystal"] {
  color-scheme: light;
  --bg: #dbeee9;
  --bg-2: #cbe5de;
  --bg-3: #effaf7;
  --ink: #133632;
  --ink-soft: #3f6d66;
  --rule: #a5d3c9;
  --accent: #8a6620;
  --accent-ink: #effaf7;
  --user: #cfe8e1;
  --void: #9ccbdc;
  --void-glow: #b59aff;
  --sea: #2a8e9a;  --crystal: #36ad99;  --land: #bd5f3c;  --air: #7eaed6;  --plains: #78a656;
  --sky-low: #e7f6ea;  --sky-high: #a3d9d6;
  --grain: .05;
}

/* ── Mountains — the Red Mountains at sundown: ember and rock ── */
[data-theme="mountains"] {
  color-scheme: dark;
  --bg: #2b1814;
  --bg-2: #34201a;
  --bg-3: #3d271f;
  --ink: #f3e4d6;
  --ink-soft: #c99f88;
  --rule: #5b3428;
  --accent: #e8b25e;
  --accent-ink: #2b1814;
  --user: #3b231c;
  --void: #1c1020;
  --void-glow: #b07cff;
  --sea: #2b7280;  --crystal: #5aa595;  --land: #cc5530;  --air: #8a9cc8;  --plains: #5a743d;
  --sky-low: #e08a4e;  --sky-high: #5c2f3b;
  --grain: .05;
}

/* ── Isles — the Floating Isles, high and cold, in the blue hour ── */
[data-theme="isles"] {
  color-scheme: dark;
  --bg: #121a2e;
  --bg-2: #172138;
  --bg-3: #1c2842;
  --ink: #e6ecf6;
  --ink-soft: #94a4c4;
  --rule: #2a3656;
  --accent: #d9b46a;
  --accent-ink: #121a2e;
  --user: #1c2640;
  --void: #070912;
  --void-glow: #a58aff;
  --sea: #275f74;  --crystal: #4f9a92;  --land: #93462f;  --air: #9cbcf0;  --plains: #3e6040;
  --sky-low: #4b5f93;  --sky-high: #1b2340;
  --grain: .05;
}

/* ── Curtain — the Black Curtain at the top of the world. What is behind it is not drawn. ── */
[data-theme="curtain"] {
  color-scheme: dark;
  --bg: #060509;
  --bg-2: #0b0a10;
  --bg-3: #111017;
  --ink: #e9e3d6;
  --ink-soft: #8f879c;
  --rule: #221f2c;
  --accent: #cfa65a;
  --accent-ink: #0b0a10;
  --user: #15131c;
  --void: #000000;
  --void-glow: #9f7cff;
  --sea: #1f4f58;  --crystal: #3b6f68;  --land: #6e3324;  --air: #56688e;  --plains: #2f4630;
  --sky-low: #1e1a2c;  --sky-high: #0c0a14;
  --grain: .05;
}

/* ── Void — the curtain side, after dark ── */
[data-theme="void"] {
  color-scheme: dark;
  --bg: #0e0c14;
  --bg-2: #15121e;
  --bg-3: #1b1726;
  --ink: #ebe3d0;
  --ink-soft: #9c93ab;
  --rule: #2e2840;
  --accent: #d2ab5f;
  --accent-ink: #15121e;
  --user: #221d31;
  --void: #05040a;
  --void-glow: #9f7cff;
  --sea: #2f7f86;  --crystal: #5aa79b;  --land: #a2462f;  --air: #7d9bd0;  --plains: #4f7a45;
  --sky-low: #3b3350;  --sky-high: #1d1830;
  --grain: .05;
}

/* ── Verdant — the paradise of Volume 1, the plains at dusk ── */
[data-theme="verdant"] {
  color-scheme: dark;
  --bg: #0f1916;
  --bg-2: #13211c;
  --bg-3: #182a24;
  --ink: #ece7d4;
  --ink-soft: #9fb4a6;
  --rule: #26392f;
  --accent: #e2b75a;
  --accent-ink: #13211c;
  --user: #1d3229;
  --void: #07100d;
  --void-glow: #c58cff;
  --sea: #2c8a8a;  --crystal: #79c7b1;  --land: #b5583a;  --air: #8db5d8;  --plains: #5d8f4a;
  --sky-low: #e9b979;  --sky-high: #3e6a73;
  --grain: .05;
}