/* Themes. Every colour the site's CHROME uses is a role defined here, per
   theme and per mode; nothing else in the stylesheets names a theme colour.
   <html data-theme="jade|ember|ocean|violet|sakura|gold" data-mode="dark|light">
   is set by theme.js before the page paints.

   The binder itself (leather, pages, pockets, rings) is a physical object and
   keeps its own colours in every theme; a dark binder on a light page is what
   a real one looks like.

   ⚠️ A role added here must be given a value in EVERY block below — a theme
   that misses one silently shows jade's, which is exactly the "left-over
   default colour" a theme must never have. tools/check_themes.mjs checks. */

:root, :root[data-theme="jade"] {
  color-scheme: dark;
  --bg: #0b1215; --bg-2: #101b20;
  --surface: rgba(192, 219, 218, .045); --surface-2: rgba(192, 219, 218, .08);
  --ink-rgb: 255 255 255;
  --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16);
  --text: #f3f1e9; --muted: #a5b8ba; --faint: #8ea3a8;
  --accent: #5ed7bb; --accent-strong: #226e61; --accent-hover: #2a7f70; --accent-soft: rgba(94, 215, 187, .12);
  --accent-text: #bde9c9; --accent-text-hover: #c9f3e5;
  --active-bg: #24473f; --active-text: #d3f1df;
  --on-accent: #0b1215; --accent-bright: #7ee6cd;
  --hero-btn: #bde9c9; --hero-btn-hover: #d4f3dc; --hero-btn-text: #123d32;
  --eyebrow: #a8c7bc; --hero-em: #cbd8bd; --soft-text: #bfcdc6;
  --meter: #65bea5; --meter-2: #8db5cd;
  --aurora-1: #2a796c; --aurora-2: #285b6a; --aurora-3: #665b34; --aurora-opacity: .12;
  --panel: rgba(14, 22, 25, .98); --panel-solid: #0e1619; --panel-2: #0b1013;
  --overlay: rgba(11, 18, 21, .94); --overlay-strong: rgba(11, 18, 21, .96);
  --tray: rgba(10, 16, 18, .88); --input-bg: rgba(2, 10, 14, .35);
  --backdrop: rgba(3, 5, 6, .78); --wash-rgb: 8 12 14;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); --shadow-deep: rgba(0, 0, 0, .95);
  --good: #34d399; --good-text: #bbf7d0; --bad: #fb7185; --bad-text: #fecdd3;
  --amber: #fbbf24; --green: #34d399; --danger: #fb7185; --cyan: #89bcca;
}
:root[data-theme="ember"] {
  --bg: #120d0b; --bg-2: #1b1310;
  --surface: rgba(230, 205, 195, .045); --surface-2: rgba(230, 205, 195, .08);
  --text: #f6efe9; --muted: #c2aea6; --faint: #a8948c;
  --accent: #ff9466; --accent-strong: #9c4222; --accent-hover: #b24d28; --accent-soft: rgba(255, 148, 102, .13);
  --accent-text: #ffd2bd; --accent-text-hover: #ffe2d4;
  --active-bg: #4d2616; --active-text: #ffe2d4;
  --on-accent: #1c0c05; --accent-bright: #ffb08f;
  --hero-btn: #ffd2bd; --hero-btn-hover: #ffe3d5; --hero-btn-text: #4a1d0c;
  --eyebrow: #d8b3a4; --hero-em: #f0cdb4; --soft-text: #d6c1b8;
  --meter: #ff9f7a; --meter-2: #e0b27a;
  --aurora-1: #8a3a1c; --aurora-2: #7a2a3a; --aurora-3: #7a5a1c;
  --panel: rgba(26, 17, 14, .98); --panel-solid: #1a110e; --panel-2: #120c0a;
  --overlay: rgba(18, 13, 11, .94); --overlay-strong: rgba(18, 13, 11, .96);
  --tray: rgba(20, 13, 11, .88); --input-bg: rgba(14, 6, 4, .35);
  --backdrop: rgba(8, 4, 3, .78); --wash-rgb: 16 10 8;
}
:root[data-theme="ocean"] {
  --bg: #0a0f17; --bg-2: #0e1622;
  --surface: rgba(190, 210, 235, .045); --surface-2: rgba(190, 210, 235, .08);
  --text: #eef3f8; --muted: #a8b7c6; --faint: #8d9dae;
  --accent: #62b7ff; --accent-strong: #1f5c96; --accent-hover: #2669a8; --accent-soft: rgba(98, 183, 255, .13);
  --accent-text: #c4e2ff; --accent-text-hover: #d9ecff;
  --active-bg: #1b3a5e; --active-text: #d9ecff;
  --on-accent: #06182b; --accent-bright: #8ccaff;
  --hero-btn: #c4e2ff; --hero-btn-hover: #d9ecff; --hero-btn-text: #0d2a47;
  --eyebrow: #a7bfd6; --hero-em: #c3d6ea; --soft-text: #bccadb;
  --meter: #6fb3ea; --meter-2: #8fc0c9;
  --aurora-1: #1d5a8a; --aurora-2: #2a3f7a; --aurora-3: #1a6a6a;
  --panel: rgba(13, 20, 31, .98); --panel-solid: #0d141f; --panel-2: #090e16;
  --overlay: rgba(10, 15, 23, .94); --overlay-strong: rgba(10, 15, 23, .96);
  --tray: rgba(11, 17, 26, .88); --input-bg: rgba(2, 6, 14, .35);
  --backdrop: rgba(3, 5, 9, .78); --wash-rgb: 8 12 20;
}
:root[data-theme="violet"] {
  --bg: #0e0b15; --bg-2: #151120;
  --surface: rgba(215, 205, 240, .045); --surface-2: rgba(215, 205, 240, .08);
  --text: #f2effa; --muted: #b3aac6; --faint: #9a90ae;
  --accent: #b69cff; --accent-strong: #5a3fa6; --accent-hover: #6849bd; --accent-soft: rgba(182, 156, 255, .14);
  --accent-text: #ddd2ff; --accent-text-hover: #e9e2ff;
  --active-bg: #33265a; --active-text: #e9e2ff;
  --on-accent: #16093a; --accent-bright: #cbb8ff;
  --hero-btn: #ddd2ff; --hero-btn-hover: #eae3ff; --hero-btn-text: #2a1a5a;
  --eyebrow: #bcb0d8; --hero-em: #d2c8ec; --soft-text: #c6bed8;
  --meter: #a98cf5; --meter-2: #9fb0e8;
  --aurora-1: #4a2f8a; --aurora-2: #6a2a6a; --aurora-3: #2a3f7a;
  --panel: rgba(20, 16, 30, .98); --panel-solid: #14101e; --panel-2: #0d0a14;
  --overlay: rgba(14, 11, 21, .94); --overlay-strong: rgba(14, 11, 21, .96);
  --tray: rgba(16, 12, 24, .88); --input-bg: rgba(8, 4, 16, .35);
  --backdrop: rgba(5, 3, 9, .78); --wash-rgb: 12 9 18;
}
:root[data-theme="sakura"] {
  --bg: #130b10; --bg-2: #1c1118;
  --surface: rgba(240, 205, 222, .045); --surface-2: rgba(240, 205, 222, .08);
  --text: #f9eff4; --muted: #c4aab7; --faint: #aa909d;
  --accent: #ff8fc0; --accent-strong: #a13a6b; --accent-hover: #b8457b; --accent-soft: rgba(255, 143, 192, .13);
  --accent-text: #ffd3e6; --accent-text-hover: #ffe3ef;
  --active-bg: #4b2138; --active-text: #ffe3ef;
  --on-accent: #2b0718; --accent-bright: #ffb0d3;
  --hero-btn: #ffd3e6; --hero-btn-hover: #ffe4f0; --hero-btn-text: #4a1230;
  --eyebrow: #d8b1c3; --hero-em: #efcadb; --soft-text: #d8c0cb;
  --meter: #f59ac2; --meter-2: #d7a6d8;
  --aurora-1: #8a2f5a; --aurora-2: #5a2f7a; --aurora-3: #7a4a5a;
  --panel: rgba(27, 15, 22, .98); --panel-solid: #1b0f16; --panel-2: #120a0f;
  --overlay: rgba(19, 11, 16, .94); --overlay-strong: rgba(19, 11, 16, .96);
  --tray: rgba(21, 12, 18, .88); --input-bg: rgba(14, 4, 10, .35);
  --backdrop: rgba(8, 3, 6, .78); --wash-rgb: 16 9 13;
}
:root[data-theme="gold"] {
  --bg: #110f0a; --bg-2: #19160e;
  --surface: rgba(235, 225, 195, .045); --surface-2: rgba(235, 225, 195, .08);
  --text: #f7f3e8; --muted: #bdb49c; --faint: #a39a82;
  --accent: #f0c24f; --accent-strong: #8a6814; --accent-hover: #9e7818; --accent-soft: rgba(240, 194, 79, .13);
  --accent-text: #f7e3a8; --accent-text-hover: #fbeec6;
  --active-bg: #433817; --active-text: #fbeec6;
  --on-accent: #211802; --accent-bright: #f5d27a;
  --hero-btn: #f7e3a8; --hero-btn-hover: #fbedc4; --hero-btn-text: #3a2c05;
  --eyebrow: #cfc09a; --hero-em: #e8d9b0; --soft-text: #d0c6ad;
  --meter: #e3b94e; --meter-2: #b9c27a;
  --aurora-1: #7a5a16; --aurora-2: #5a4a1a; --aurora-3: #3a5a2a;
  --panel: rgba(24, 21, 13, .98); --panel-solid: #18150d; --panel-2: #100e09;
  --overlay: rgba(17, 15, 10, .94); --overlay-strong: rgba(17, 15, 10, .96);
  --tray: rgba(19, 17, 11, .88); --input-bg: rgba(10, 8, 2, .35);
  --backdrop: rgba(6, 5, 2, .78); --wash-rgb: 14 12 8;
}

/* ── Light mode: the same roles, on paper ─────────────────────────────── */
:root[data-mode="light"] {
  color-scheme: light;
  --ink-rgb: 22 32 34;
  --line: rgba(22, 32, 34, .12); --line-strong: rgba(22, 32, 34, .2);
  --text: #182224; --muted: #4c5d61; --faint: #66777b;
  --on-accent: #ffffff; --active-text: #ffffff; --hero-btn-text: #ffffff;
  --aurora-opacity: .07;
  --input-bg: #ffffff;
  --backdrop: rgba(22, 28, 30, .42); --wash-rgb: 250 249 245;
  --shadow: 0 14px 30px -18px rgba(22, 32, 34, .35); --shadow-deep: rgba(22, 32, 34, .3);
  --good: #0f9f6e; --good-text: #0b6b47; --bad: #d8405c; --bad-text: #a3243d;
  --amber: #b7791f; --green: #0f9f6e; --danger: #d8405c; --cyan: #2b7a92;
}
:root[data-mode="light"], :root[data-mode="light"][data-theme="jade"] {
  --bg: #f2f4ef; --bg-2: #e7ebe4;
  --surface: rgba(34, 110, 97, .05); --surface-2: rgba(34, 110, 97, .09);
  --accent: #178a72; --accent-strong: #0f6b58; --accent-hover: #0c5a4a; --accent-soft: rgba(23, 138, 114, .12);
  --accent-text: #0f6b58; --accent-text-hover: #0a4d40; --active-bg: #0f6b58; --accent-bright: #12a386;
  --hero-btn: #0f6b58; --hero-btn-hover: #0c5a4a;
  --eyebrow: #2f6b5c; --hero-em: #0f6b58; --soft-text: #4c5d61;
  --meter: #178a72; --meter-2: #4a86a8;
  --aurora-1: #7fd8c2; --aurora-2: #8cc4d4; --aurora-3: #e0cf8e;
  --panel: rgba(255, 255, 253, .99); --panel-solid: #fffffd; --panel-2: #f4f6f2;
  --overlay: rgba(242, 244, 239, .94); --overlay-strong: rgba(242, 244, 239, .97);
  --tray: rgba(252, 253, 250, .94);
}
:root[data-mode="light"][data-theme="ember"] {
  --bg: #f7f1ec; --bg-2: #efe6df;
  --surface: rgba(156, 66, 34, .05); --surface-2: rgba(156, 66, 34, .09);
  --accent: #c8541f; --accent-strong: #9a3a12; --accent-hover: #83300f; --accent-soft: rgba(200, 84, 31, .12);
  --accent-text: #9a3a12; --accent-text-hover: #72290b; --active-bg: #9a3a12; --accent-bright: #e0652b;
  --hero-btn: #9a3a12; --hero-btn-hover: #83300f;
  --eyebrow: #8a4a30; --hero-em: #9a3a12; --soft-text: #5e5550;
  --meter: #c8541f; --meter-2: #b8862f;
  --aurora-1: #f0b394; --aurora-2: #e7a6b4; --aurora-3: #efd08a;
  --panel: rgba(255, 253, 251, .99); --panel-solid: #fffdfb; --panel-2: #f8f2ee;
  --overlay: rgba(247, 241, 236, .94); --overlay-strong: rgba(247, 241, 236, .97);
  --tray: rgba(255, 252, 250, .94);
}
:root[data-mode="light"][data-theme="ocean"] {
  --bg: #eef3f8; --bg-2: #e2eaf2;
  --surface: rgba(31, 92, 150, .05); --surface-2: rgba(31, 92, 150, .09);
  --accent: #1f73bd; --accent-strong: #16548c; --accent-hover: #114574; --accent-soft: rgba(31, 115, 189, .12);
  --accent-text: #16548c; --accent-text-hover: #0e3c66; --active-bg: #16548c; --accent-bright: #2b88d8;
  --hero-btn: #16548c; --hero-btn-hover: #114574;
  --eyebrow: #3a5f82; --hero-em: #16548c; --soft-text: #4f5d6b;
  --meter: #1f73bd; --meter-2: #2f8a8f;
  --aurora-1: #9fcaf0; --aurora-2: #aab4ec; --aurora-3: #9fdada;
  --panel: rgba(253, 254, 255, .99); --panel-solid: #fdfeff; --panel-2: #f1f5fa;
  --overlay: rgba(238, 243, 248, .94); --overlay-strong: rgba(238, 243, 248, .97);
  --tray: rgba(251, 253, 255, .94);
}
:root[data-mode="light"][data-theme="violet"] {
  --bg: #f3f0f8; --bg-2: #e9e4f2;
  --surface: rgba(90, 63, 166, .05); --surface-2: rgba(90, 63, 166, .09);
  --accent: #6c49cc; --accent-strong: #52339e; --accent-hover: #432a84; --accent-soft: rgba(108, 73, 204, .12);
  --accent-text: #52339e; --accent-text-hover: #3b2474; --active-bg: #52339e; --accent-bright: #7d5ce0;
  --hero-btn: #52339e; --hero-btn-hover: #432a84;
  --eyebrow: #5f4c8a; --hero-em: #52339e; --soft-text: #585266;
  --meter: #6c49cc; --meter-2: #4a6fc0;
  --aurora-1: #c7b5f2; --aurora-2: #e3b0e0; --aurora-3: #aab4ec;
  --panel: rgba(254, 253, 255, .99); --panel-solid: #fefdff; --panel-2: #f5f2fa;
  --overlay: rgba(243, 240, 248, .94); --overlay-strong: rgba(243, 240, 248, .97);
  --tray: rgba(253, 252, 255, .94);
}
:root[data-mode="light"][data-theme="sakura"] {
  --bg: #f8f0f3; --bg-2: #f0e4ea;
  --surface: rgba(161, 58, 107, .05); --surface-2: rgba(161, 58, 107, .09);
  --accent: #c43a7a; --accent-strong: #972a5c; --accent-hover: #7d224c; --accent-soft: rgba(196, 58, 122, .12);
  --accent-text: #972a5c; --accent-text-hover: #6f1f44; --active-bg: #972a5c; --accent-bright: #d9528f;
  --hero-btn: #972a5c; --hero-btn-hover: #7d224c;
  --eyebrow: #8a4a66; --hero-em: #972a5c; --soft-text: #5e5258;
  --meter: #c43a7a; --meter-2: #9a5aa8;
  --aurora-1: #f2b0cd; --aurora-2: #cdb0ec; --aurora-3: #efc3cf;
  --panel: rgba(255, 253, 254, .99); --panel-solid: #fffdfe; --panel-2: #f9f2f5;
  --overlay: rgba(248, 240, 243, .94); --overlay-strong: rgba(248, 240, 243, .97);
  --tray: rgba(255, 252, 253, .94);
}
:root[data-mode="light"][data-theme="gold"] {
  --bg: #f6f3e8; --bg-2: #ede7d4;
  --surface: rgba(138, 104, 20, .055); --surface-2: rgba(138, 104, 20, .1);
  --accent: #9a7414; --accent-strong: #75580c; --accent-hover: #5f4709; --accent-soft: rgba(154, 116, 20, .13);
  --accent-text: #75580c; --accent-text-hover: #544006; --active-bg: #75580c; --accent-bright: #b08818;
  --hero-btn: #75580c; --hero-btn-hover: #5f4709;
  --eyebrow: #7a6530; --hero-em: #75580c; --soft-text: #5c5647;
  --meter: #9a7414; --meter-2: #6f8a3a;
  --aurora-1: #ecd08a; --aurora-2: #e0cfa0; --aurora-3: #bcd4a0;
  --panel: rgba(255, 254, 250, .99); --panel-solid: #fffefa; --panel-2: #f8f5ec;
  --overlay: rgba(246, 243, 232, .94); --overlay-strong: rgba(246, 243, 232, .97);
  --tray: rgba(255, 253, 248, .94);
}