/*
 * Themes — the entire skinnable surface of Xenocide.
 *
 * A theme is ONE `[data-theme="slug"]` block that fills every token below.
 * Nothing else needs to change: deck.css and the template read these and only
 * these, so a new skin is an addition to this file and nothing more.
 *
 * The picker builds itself by scanning this stylesheet for `[data-theme=…]`
 * rules and reading each one's `--theme-name`. Declare that first or your
 * theme won't be selectable.
 *
 * Two conventions to respect:
 *
 *  1. Tokens named `*-rgb` hold a bare "R G B" triple, not a colour function,
 *     because Tailwind and CSS alpha compositing wrap them: `rgb(var(--x) / .4)`.
 *     Everything else is a normal CSS value.
 *
 *  2. Contrast is load-bearing, not taste. Four pairs have to survive or the
 *     game becomes unplayable — see design/THEME-KIT.md for the required
 *     ratios. The tightest is --suit-dim against --stock: that's how a player
 *     tells a 4 of Clubs from a 4 of Hearts at hand size.
 */

:root,
[data-theme="obsidian"] {
  --theme-name: "Obsidian";

  /* ── type ─────────────────────────────────────────────────────────────── */
  --font-display: "EB Garamond", Georgia, ui-serif, serif;
  --font-ui: "EB Garamond", Georgia, ui-serif, serif;
  --root-size: 17px;          /* lifts the whole rem scale for small x-heights */

  /* ── page + chrome ────────────────────────────────────────────────────── */
  --page-base: #0d1117;
  --page-wash-top: rgba(26, 37, 54, 1);      /* cold light from above */
  --page-wash-bottom: rgba(30, 18, 25, 1);   /* something warmer below */

  --ui-900-rgb: 13 17 23;     /* page / deepest surface */
  --ui-800-rgb: 20 27 36;     /* panels */
  --ui-700-rgb: 28 37 49;     /* inputs, raised */
  --ui-600-rgb: 38 49 63;     /* borders, dividers */
  --ui-accent-rgb: 201 208 216;      /* highlight: turn, selection, buttons */
  --ui-accent-hi-rgb: 231 236 241;   /* its brighter partner */

  /* Text ramp, brightest to faintest. Aliased onto Tailwind's `slate`. */
  --ui-text-100-rgb: 241 245 249;
  --ui-text-200-rgb: 226 232 240;
  --ui-text-300-rgb: 203 213 225;
  --ui-text-400-rgb: 148 163 184;
  --ui-text-500-rgb: 100 116 139;
  --ui-text-600-rgb: 71 85 105;

  /* ── the deck ─────────────────────────────────────────────────────────── */
  --stock: #14171d;
  --stock-deep: #090b0f;
  --stock-ink: #dde3ea;       /* type printed on a card */
  --rule-rgb: 226 232 240;    /* hairline rules and frames */
  --card-radius: 5px;
  --card-sheen: rgba(150, 172, 205, .11);   /* light catching the top corner */
  --card-shade: rgba(0, 0, 0, .6);          /* shadow pooling at the bottom */

  --suit-bright: #eef3f9;     /* Hearts + Diamonds */
  --suit-dim: #8a939e;        /* Clubs + Spades */

  --art-ink: #e3e9f0;         /* the figure */
  --art-outline: #04060a;     /* its rim */

  --stock-enemy: #1a1418;     /* the enemy's card runs warmer */
  --stock-enemy-deep: #0c0709;
  --stock-jester: #1c1727;    /* the Jester gets its own stock entirely */
  --stock-jester-deep: #0d0a14;
  --ink-jester: #b3a3cf;

  /* ── bars ─────────────────────────────────────────────────────────────── */
  /* Full gradients: the track carries them, the spent end is covered. */
  --bar-health: linear-gradient(90deg,
    #241f5c 0%, #3b2878 26%, #5c369a 50%, #8558ab 74%, #bfa0c6 100%);
  --bar-attack: linear-gradient(90deg, #f4f7fa 0%, #c6ccd4 48%, #878f99 100%);
  --bar-void: #222b38;                          /* health already lost */
  --bar-shield: linear-gradient(90deg, #39414a, #1c222a);  /* damage absorbed */
  --bar-ghost: rgba(255, 255, 255, .45);        /* health this play would take */
  --bar-ghost-shield: rgba(139, 149, 161, .9);  /* shield this play would add */

  --stat-health: #c6a3d6;
  --stat-health-preview: #e6d6f0;
  --stat-attack: #e9eef3;
  --stat-attack-spent: #6d757e;
  --stat-attack-preview: #aab2bc;
  --stat-shield: #9aa3ad;

  /* ── deck tiles (Castle / Tavern / Discard) ───────────────────────────── */
  --tile-face: #1d2734;
  --tile-face-deep: #11161d;
  --tile-weave-rgb: 201 208 216;   /* the lattice printed on a card back */
  --tile-label: #9fb0c4;
  --tile-count: #e7ecf1;
  --tile-sub: #64748b;
  --tile-empty: #475569;

  /* ── suit power chips on the mat ──────────────────────────────────────── */
  --chip-hearts-rgb: 251 113 133;
  --chip-diamonds-rgb: 56 189 248;
  --chip-clubs-rgb: 245 158 11;
  --chip-spades-rgb: 148 163 184;
  --chip-jester-rgb: 201 208 216;
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(0, 0, 0, .65);   /* the ridge under a number card's suit mark */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Grimoire — light stock. Proves the deck inverts cleanly: the art is
 * black-on-parchment here purely because --art-ink and --stock swapped.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="grimoire"] {
  --theme-name: "Grimoire";

  --font-display: "EB Garamond", Georgia, ui-serif, serif;
  --font-ui: "EB Garamond", Georgia, ui-serif, serif;
  --root-size: 17px;

  --page-base: #14110d;
  --page-wash-top: rgba(38, 31, 22, 1);
  --page-wash-bottom: rgba(26, 15, 12, 1);

  --ui-900-rgb: 20 17 13;
  --ui-800-rgb: 31 26 20;
  --ui-700-rgb: 43 36 27;
  --ui-600-rgb: 58 48 36;
  --ui-accent-rgb: 216 182 106;
  --ui-accent-hi-rgb: 235 210 158;

  --ui-text-100-rgb: 245 239 226;
  --ui-text-200-rgb: 231 222 202;
  --ui-text-300-rgb: 206 194 170;
  --ui-text-400-rgb: 163 149 124;
  --ui-text-500-rgb: 124 111 90;
  --ui-text-600-rgb: 92 80 63;

  --stock: #e8e0ca;
  --stock-deep: #cdc0a0;
  --stock-ink: #16120f;
  --rule-rgb: 22 18 15;
  --card-radius: 5px;
  --card-sheen: rgba(255, 252, 240, .8);
  --card-shade: rgba(120, 96, 60, .24);

  --suit-bright: #7c1c1c;     /* oxblood carries Hearts + Diamonds here */
  --suit-dim: #16120f;

  --art-ink: #0e0e12;
  --art-outline: #97a1ac;

  --stock-enemy: #e3d8bd;
  --stock-enemy-deep: #bfae88;
  --stock-jester: #ded2ae;
  --stock-jester-deep: #b9a87f;
  --ink-jester: #4a3a12;

  --bar-health: linear-gradient(90deg,
    #3b1f1f 0%, #6d2727 32%, #9c3a2a 62%, #c2703f 84%, #dda863 100%);
  --bar-attack: linear-gradient(90deg, #f3e6c4 0%, #c9a86a 48%, #8a6f3c 100%);
  --bar-void: #2b2418;
  --bar-shield: linear-gradient(90deg, #4a3f28, #241d12);
  --bar-ghost: rgba(255, 244, 214, .5);
  --bar-ghost-shield: rgba(163, 138, 84, .9);

  --stat-health: #d98f6a;
  --stat-health-preview: #f0cf9f;
  --stat-attack: #ecdcb2;
  --stat-attack-spent: #7c6f5a;
  --stat-attack-preview: #c2ab7d;
  --stat-shield: #a3936d;

  --tile-face: #2a2318;
  --tile-face-deep: #17120c;
  --tile-weave-rgb: 216 182 106;
  --tile-label: #b8a67f;
  --tile-count: #ecdcb2;
  --tile-sub: #7c6f5a;
  --tile-empty: #5c503f;

  --chip-hearts-rgb: 190 90 70;
  --chip-diamonds-rgb: 150 160 110;
  --chip-clubs-rgb: 202 154 74;
  --chip-spades-rgb: 150 140 118;
  --chip-jester-rgb: 216 182 106;
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(255, 252, 240, .55);   /* the ridge under a number card's suit mark */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Nocturne — deep indigo stock, cold verdigris highlight.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="nocturne"] {
  --theme-name: "Nocturne";

  --font-display: "EB Garamond", Georgia, ui-serif, serif;
  --font-ui: "EB Garamond", Georgia, ui-serif, serif;
  --root-size: 17px;

  --page-base: #0a0d18;
  --page-wash-top: rgba(20, 28, 54, 1);
  --page-wash-bottom: rgba(10, 26, 30, 1);

  --ui-900-rgb: 10 13 24;
  --ui-800-rgb: 17 22 40;
  --ui-700-rgb: 25 32 55;
  --ui-600-rgb: 36 46 74;
  --ui-accent-rgb: 126 200 191;
  --ui-accent-hi-rgb: 186 232 226;

  --ui-text-100-rgb: 236 243 246;
  --ui-text-200-rgb: 214 227 233;
  --ui-text-300-rgb: 183 202 212;
  --ui-text-400-rgb: 132 156 172;
  --ui-text-500-rgb: 94 116 133;
  --ui-text-600-rgb: 66 84 100;

  --stock: #121a2e;
  --stock-deep: #070c18;
  --stock-ink: #d7e6ea;
  --rule-rgb: 152 214 206;
  --card-radius: 5px;
  --card-sheen: rgba(126, 200, 191, .12);
  --card-shade: rgba(0, 0, 0, .62);

  --suit-bright: #eafaf7;
  --suit-dim: #7f96a6;

  --art-ink: #dff1ee;
  --art-outline: #03060d;

  --stock-enemy: #1a1430;
  --stock-enemy-deep: #0b0718;
  --stock-jester: #10222a;
  --stock-jester-deep: #071216;
  --ink-jester: #8fd6c8;

  --bar-health: linear-gradient(90deg,
    #10233f 0%, #17406b 28%, #1f6f8c 56%, #35a99b 80%, #7fd9c2 100%);
  --bar-attack: linear-gradient(90deg, #eafaf7 0%, #a8c8cd 48%, #5d7a88 100%);
  --bar-void: #16203a;
  --bar-shield: linear-gradient(90deg, #2b4152, #101d29);
  --bar-ghost: rgba(226, 255, 250, .45);
  --bar-ghost-shield: rgba(110, 156, 168, .9);

  --stat-health: #6fd3c0;
  --stat-health-preview: #c6f2e8;
  --stat-attack: #eafaf7;
  --stat-attack-spent: #5d7280;
  --stat-attack-preview: #a3bcc6;
  --stat-shield: #8aa6b2;

  --tile-face: #16203a;
  --tile-face-deep: #0a0f1e;
  --tile-weave-rgb: 126 200 191;
  --tile-label: #8aa6b2;
  --tile-count: #d9f2ec;
  --tile-sub: #5e7485;
  --tile-empty: #3b4f66;

  --chip-hearts-rgb: 232 130 150;
  --chip-diamonds-rgb: 108 190 226;
  --chip-clubs-rgb: 226 178 106;
  --chip-spades-rgb: 138 166 178;
  --chip-jester-rgb: 126 200 191;
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(0, 0, 0, .65);   /* the ridge under a number card's suit mark */
}

/* Xenocide — five new skins.
 * Append verbatim to static/themes.css. Nothing else in the file changes.
 * Contract and contrast requirements: design/THEME-KIT.md.
 * The /* @kind *​/ comments are tooling metadata and can be stripped.
 */

/* ─────────────────────────────────────────────────────────────────────────
 * Tallow — one candle in a cold room. Dark stock, but every surface is lit
 * from a warm point source; the enemy runs redder, the Jester goes cold.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="tallow"] {
  --theme-name: "Tallow"; /* @kind other */

  --font-display: "Cormorant Garamond", Georgia, ui-serif, serif;
  --font-ui: "Cormorant Garamond", Georgia, ui-serif, serif;
  --root-size: 18px;

  --page-base: #0b0907;
  --page-wash-top: rgba(48, 33, 17, 1);
  --page-wash-bottom: rgba(18, 11, 9, 1);

  --ui-900-rgb: 11 9 7; /* @kind color */
  --ui-800-rgb: 26 20 15; /* @kind color */
  --ui-700-rgb: 38 29 21; /* @kind color */
  --ui-600-rgb: 54 41 29; /* @kind color */
  --ui-accent-rgb: 224 168 88; /* @kind color */
  --ui-accent-hi-rgb: 244 205 146; /* @kind color */

  --ui-text-100-rgb: 247 240 228;
  --ui-text-200-rgb: 234 224 208;
  --ui-text-300-rgb: 212 199 179;
  --ui-text-400-rgb: 176 160 138;
  --ui-text-500-rgb: 132 118 100;
  --ui-text-600-rgb: 94 82 68;

  --stock: #1a1410;
  --stock-deep: #0c0907;
  --stock-ink: #f0e2c8;
  --rule-rgb: 222 190 138; /* @kind color */
  --card-radius: 5px;
  --card-sheen: rgba(255, 206, 128, .13);
  --card-shade: rgba(0, 0, 0, .62);

  --suit-bright: #ffeac2;
  --suit-dim: #a68d68;

  --art-ink: #f2e3c4;
  --art-outline: #0a0705;

  --stock-enemy: #221310;
  --stock-enemy-deep: #0e0705;
  --stock-jester: #12181a;
  --stock-jester-deep: #070c0e;
  --ink-jester: #a9cfc4;

  --bar-health: linear-gradient(90deg,
    #3a0f0a 0%, #7a1f0c 26%, #b8511a 52%, #dc8b2a 78%, #f7d79a 100%); /* @kind color */
  --bar-attack: linear-gradient(90deg, #e8eef3 0%, #9aa6b3 48%, #55606c 100%); /* @kind color */
  --bar-void: #241c15;
  --bar-shield: linear-gradient(90deg, #4a4238, #221d18); /* @kind color */
  --bar-ghost: rgba(255, 244, 220, .5);
  --bar-ghost-shield: rgba(154, 166, 179, .9);

  --stat-health: #e2953f;
  --stat-health-preview: #f8d79f;
  --stat-attack: #e8eef3;
  --stat-attack-spent: #6c7480;
  --stat-attack-preview: #aab5c1;
  --stat-shield: #93a0ac;

  --tile-face: #241a12;
  --tile-face-deep: #130d09;
  --tile-weave-rgb: 222 190 138; /* @kind color */
  --tile-label: #b39a72;
  --tile-count: #f2e5cb;
  --tile-sub: #8a795f;
  --tile-empty: #5e5142;

  --chip-hearts-rgb: 216 112 88; /* @kind color */
  --chip-diamonds-rgb: 132 170 178; /* @kind color */
  --chip-clubs-rgb: 224 168 88; /* @kind color */
  --chip-spades-rgb: 164 150 128; /* @kind color */
  --chip-jester-rgb: 169 207 196; /* @kind color */
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(0, 0, 0, .65);   /* the ridge under a number card's suit mark */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Mortuary — zinc table, cold light, cards as drawn sheets. Light stock,
 * but colder and flatter than Grimoire: suit is carried by a surgical blue
 * against slate rather than by warmth.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="mortuary"] {
  --theme-name: "Mortuary"; /* @kind other */

  --font-display: "Spectral", Georgia, ui-serif, serif;
  --font-ui: "Spectral", Georgia, ui-serif, serif;
  --root-size: 16px;

  --page-base: #0e1113;
  --page-wash-top: rgba(32, 44, 48, 1);
  --page-wash-bottom: rgba(18, 22, 26, 1);

  --ui-900-rgb: 14 17 19; /* @kind color */
  --ui-800-rgb: 22 27 30; /* @kind color */
  --ui-700-rgb: 32 39 43; /* @kind color */
  --ui-600-rgb: 46 55 60; /* @kind color */
  --ui-accent-rgb: 154 190 196; /* @kind color */
  --ui-accent-hi-rgb: 208 232 234; /* @kind color */

  --ui-text-100-rgb: 240 245 246;
  --ui-text-200-rgb: 222 230 232;
  --ui-text-300-rgb: 196 208 211;
  --ui-text-400-rgb: 150 166 170;
  --ui-text-500-rgb: 108 124 129;
  --ui-text-600-rgb: 78 92 97;

  --stock: #d9dee0;
  --stock-deep: #b6bdc0;
  --stock-ink: #14181a;
  --rule-rgb: 20 24 26; /* @kind color */
  --card-radius: 3px;
  --card-sheen: rgba(255, 255, 255, .85);
  --card-shade: rgba(56, 76, 84, .26);

  --suit-bright: #0c3066;
  --suit-dim: #586064;

  --art-ink: #10171a;
  --art-outline: #9aa8ac;

  --stock-enemy: #d5d2c4;
  --stock-enemy-deep: #b2ae9c;
  --stock-jester: #c9d6d8;
  --stock-jester-deep: #a3b4b8;
  --ink-jester: #0f3a44;

  --bar-health: linear-gradient(90deg,
    #142c3a 0%, #1f5570 28%, #3e8ba0 56%, #86bcc7 80%, #d8eaec 100%); /* @kind color */
  --bar-attack: linear-gradient(90deg, #f6dcd2 0%, #c98872 48%, #7d4636 100%); /* @kind color */
  --bar-void: #1b2226;
  --bar-shield: linear-gradient(90deg, #3b464b, #1d2428); /* @kind color */
  --bar-ghost: rgba(226, 244, 247, .5);
  --bar-ghost-shield: rgba(146, 166, 172, .9);

  --stat-health: #7fb8c7;
  --stat-health-preview: #cfe9ee;
  --stat-attack: #dfa088;
  --stat-attack-spent: #6b7276;
  --stat-attack-preview: #c99a8a;
  --stat-shield: #93a2a7;

  --tile-face: #202a2e;
  --tile-face-deep: #131a1d;
  --tile-weave-rgb: 154 190 196; /* @kind color */
  --tile-label: #8fa6ab;
  --tile-count: #e2eef0;
  --tile-sub: #718589;
  --tile-empty: #4a5b60;

  --chip-hearts-rgb: 214 122 110; /* @kind color */
  --chip-diamonds-rgb: 122 178 196; /* @kind color */
  --chip-clubs-rgb: 198 176 118; /* @kind color */
  --chip-spades-rgb: 150 166 172; /* @kind color */
  --chip-jester-rgb: 154 190 196; /* @kind color */
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(255, 252, 240, .55);   /* the ridge under a number card's suit mark */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Fathom — black water with something luminous in it. The only living
 * colour is the accent; health rots magenta, attack stays cold.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="fathom"] {
  --theme-name: "Fathom"; /* @kind other */

  --font-display: "Newsreader", Georgia, ui-serif, serif;
  --font-ui: "Newsreader", Georgia, ui-serif, serif;
  --root-size: 17px;

  --page-base: #060b0a;
  --page-wash-top: rgba(10, 34, 30, 1);
  --page-wash-bottom: rgba(6, 18, 22, 1);

  --ui-900-rgb: 6 11 10; /* @kind color */
  --ui-800-rgb: 12 21 20; /* @kind color */
  --ui-700-rgb: 19 32 30; /* @kind color */
  --ui-600-rgb: 28 46 43; /* @kind color */
  --ui-accent-rgb: 150 224 120; /* @kind color */
  --ui-accent-hi-rgb: 198 245 172; /* @kind color */

  --ui-text-100-rgb: 233 246 234;
  --ui-text-200-rgb: 214 232 216;
  --ui-text-300-rgb: 186 208 190;
  --ui-text-400-rgb: 140 166 146;
  --ui-text-500-rgb: 100 126 108;
  --ui-text-600-rgb: 72 94 80;

  --stock: #0b1614;
  --stock-deep: #050b0a;
  --stock-ink: #d6efdc;
  --rule-rgb: 150 224 120; /* @kind color */
  --card-radius: 4px;
  --card-sheen: rgba(150, 224, 120, .10);
  --card-shade: rgba(0, 0, 0, .66);

  --suit-bright: #d8ffb0;
  --suit-dim: #7f9a86;

  --art-ink: #cdebd2;
  --art-outline: #020605;

  --stock-enemy: #1a1206;
  --stock-enemy-deep: #0b0803;
  --stock-jester: #120b1c;
  --stock-jester-deep: #070410;
  --ink-jester: #c9a6ff;

  --bar-health: linear-gradient(90deg,
    #2a0f33 0%, #5a1a4e 28%, #8f2f5c 54%, #c2596b 78%, #eaa79a 100%); /* @kind color */
  --bar-attack: linear-gradient(90deg, #dff2ff 0%, #93b6cc 48%, #4c6879 100%); /* @kind color */
  --bar-void: #101c1a;
  --bar-shield: linear-gradient(90deg, #2c4340, #111e1c); /* @kind color */
  --bar-ghost: rgba(255, 236, 246, .5);
  --bar-ghost-shield: rgba(120, 150, 166, .9);

  --stat-health: #d1697e;
  --stat-health-preview: #f0aab0;
  --stat-attack: #dff2ff;
  --stat-attack-spent: #5d7280;
  --stat-attack-preview: #a6c1d1;
  --stat-shield: #8ea8b6;

  --tile-face: #10201d;
  --tile-face-deep: #071110;
  --tile-weave-rgb: 150 224 120; /* @kind color */
  --tile-label: #8caa93;
  --tile-count: #dcf2e0;
  --tile-sub: #678672;
  --tile-empty: #40594a;

  --chip-hearts-rgb: 226 118 138; /* @kind color */
  --chip-diamonds-rgb: 118 186 214; /* @kind color */
  --chip-clubs-rgb: 214 176 96; /* @kind color */
  --chip-spades-rgb: 140 166 148; /* @kind color */
  --chip-jester-rgb: 150 224 120; /* @kind color */
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(0, 0, 0, .65);   /* the ridge under a number card's suit mark */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Woodcut — the only light-chrome skin. Proof paper, black ink, one
 * vermilion. No gradients on the stock, square corners, indigo highlight.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="woodcut"] {
  --theme-name: "Woodcut"; /* @kind other */

  --font-display: "Cinzel", Georgia, ui-serif, serif;
  --font-ui: "EB Garamond", Georgia, ui-serif, serif;
  --root-size: 17px;

  --page-base: #cfc9bb;
  --page-wash-top: rgba(228, 223, 210, 1);
  --page-wash-bottom: rgba(188, 181, 166, 1);

  --ui-900-rgb: 207 201 187; /* @kind color */
  --ui-800-rgb: 224 219 206; /* @kind color */
  --ui-700-rgb: 236 232 221; /* @kind color */
  --ui-600-rgb: 166 158 142; /* @kind color */
  --ui-accent-rgb: 30 58 110; /* @kind color */
  --ui-accent-hi-rgb: 16 34 74; /* @kind color */

  --ui-text-100-rgb: 16 15 13;
  --ui-text-200-rgb: 34 32 28;
  --ui-text-300-rgb: 56 52 46;
  --ui-text-400-rgb: 88 82 72;
  --ui-text-500-rgb: 108 101 88;
  --ui-text-600-rgb: 142 134 120;

  --stock: #f2ede1;
  --stock-deep: #ded7c6;
  --stock-ink: #14120e;
  --rule-rgb: 20 18 14; /* @kind color */
  --card-radius: 0px;
  --card-sheen: rgba(255, 255, 255, .5);
  --card-shade: rgba(40, 34, 24, .18);

  --suit-bright: #8c1d0a;
  --suit-dim: #14120e;

  --art-ink: #12100c;
  --art-outline: #cfc7b4;

  --stock-enemy: #ece2cc;
  --stock-enemy-deep: #d2c5a8;
  --stock-jester: #e6e9ee;
  --stock-jester-deep: #ccd2da;
  --ink-jester: #1e2c52;

  --bar-health: linear-gradient(90deg,
    #cbb68d 0%, #a58152 26%, #6d5030 52%, #3b2c1c 76%, #16130e 100%); /* @kind color */
  --bar-attack: linear-gradient(90deg, #8c1d0a 0%, #b2401f 48%, #dc9573 100%); /* @kind color */
  --bar-void: #c6bfae;
  --bar-shield: linear-gradient(90deg, #8b8474, #b5ad9b); /* @kind color */
  --bar-ghost: rgba(242, 237, 225, .55);
  --bar-ghost-shield: rgba(120, 113, 100, .85);

  --stat-health: #2a251c;
  --stat-health-preview: #8a806c;
  --stat-attack: #8c1d0a;
  --stat-attack-spent: #a29a89;
  --stat-attack-preview: #c26b4e;
  --stat-shield: #6b6455;

  --tile-face: #2b2620;
  --tile-face-deep: #17140f;
  --tile-weave-rgb: 226 221 208; /* @kind color */
  --tile-label: #b8b0a0;
  --tile-count: #f4efe2;
  --tile-sub: #8f887a;
  --tile-empty: #6b6558;

  --chip-hearts-rgb: 150 32 18; /* @kind color */
  --chip-diamonds-rgb: 26 74 122; /* @kind color */
  --chip-clubs-rgb: 122 82 18; /* @kind color */
  --chip-spades-rgb: 48 44 38; /* @kind color */
  --chip-jester-rgb: 88 40 120; /* @kind color */
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(20, 18, 14, .14);
  --bar-edge-strong: rgba(20, 18, 14, .3);
  --drop-shadow: rgba(60, 52, 38, .28);
  --tile-gap: var(--page-base);
  --plate-tracking: .12em;
  --mark-emboss: rgba(255, 252, 240, .55);   /* the ridge under a number card's suit mark */
}

/* ─────────────────────────────────────────────────────────────────────────
 * Saltbleach — a drowned town at low tide. Waterlogged stock, everything
 * desaturated, rust doing the work colour used to do.
 * ───────────────────────────────────────────────────────────────────────── */
[data-theme="saltbleach"] {
  --theme-name: "Saltbleach"; /* @kind other */

  --font-display: "Crimson Pro", Georgia, ui-serif, serif;
  --font-ui: "Crimson Pro", Georgia, ui-serif, serif;
  --root-size: 17px;

  --page-base: #101616;
  --page-wash-top: rgba(40, 56, 56, 1);
  --page-wash-bottom: rgba(24, 26, 22, 1);

  --ui-900-rgb: 16 22 22; /* @kind color */
  --ui-800-rgb: 25 33 33; /* @kind color */
  --ui-700-rgb: 36 46 45; /* @kind color */
  --ui-600-rgb: 52 64 62; /* @kind color */
  --ui-accent-rgb: 186 198 182; /* @kind color */
  --ui-accent-hi-rgb: 222 230 214; /* @kind color */

  --ui-text-100-rgb: 236 240 234;
  --ui-text-200-rgb: 216 222 214;
  --ui-text-300-rgb: 190 198 190;
  --ui-text-400-rgb: 148 160 154;
  --ui-text-500-rgb: 112 124 120;
  --ui-text-600-rgb: 80 92 88;

  --stock: #c8ccbe;
  --stock-deep: #a7ac9c;
  --stock-ink: #171b17;
  --rule-rgb: 23 27 23; /* @kind color */
  --card-radius: 6px;
  --card-sheen: rgba(255, 255, 255, .55);
  --card-shade: rgba(50, 60, 52, .3);

  --suit-bright: #5e2410;
  --suit-dim: #4a544e;

  --art-ink: #1b201b;
  --art-outline: #a8b0a4;

  --stock-enemy: #c4bda8;
  --stock-enemy-deep: #a29a83;
  --stock-jester: #c2bcc8;
  --stock-jester-deep: #a09aa8;
  --ink-jester: #4a3358;

  --bar-health: linear-gradient(90deg,
    #6e2a15 0%, #96522c 28%, #b08a5e 54%, #c9b797 78%, #e8e4d2 100%); /* @kind color */
  --bar-attack: linear-gradient(90deg, #b9d0dd 0%, #7d98a8 48%, #3f5765 100%); /* @kind color */
  --bar-void: #232b2a;
  --bar-shield: linear-gradient(90deg, #3c4a4c, #1c2425); /* @kind color */
  --bar-ghost: rgba(238, 246, 240, .5);
  --bar-ghost-shield: rgba(126, 150, 160, .9);

  --stat-health: #c08a5c;
  --stat-health-preview: #e8cfab;
  --stat-attack: #a8c4d0;
  --stat-attack-preview: #d6e6ec;
  --stat-attack-spent: #5f6f76;
  --stat-shield: #8fa39c;

  --tile-face: #202a29;
  --tile-face-deep: #121a19;
  --tile-weave-rgb: 186 198 182; /* @kind color */
  --tile-label: #9aada6;
  --tile-count: #e4ece4;
  --tile-sub: #72857f;
  --tile-empty: #4c5d58;

  --chip-hearts-rgb: 202 112 96; /* @kind color */
  --chip-diamonds-rgb: 122 168 186; /* @kind color */
  --chip-clubs-rgb: 196 168 108; /* @kind color */
  --chip-spades-rgb: 146 160 152; /* @kind color */
  --chip-jester-rgb: 168 148 190; /* @kind color */
  /* ── surface fallbacks ────────────────────────────────────────────────── */
  /* Keyed to the *chrome*, not the stock: bars and cards sit on the page. */
  --bar-edge: rgba(255, 255, 255, .07);
  --bar-edge-strong: rgba(255, 255, 255, .12);
  --drop-shadow: rgba(0, 0, 0, .6);
  --tile-gap: var(--page-base);
  --plate-tracking: .06em;
  --mark-emboss: rgba(255, 252, 240, .55);   /* the ridge under a number card's suit mark */
}