ui/theme.css

/* theme.css — every colour this game is made of, in one place.
 *
 * If you want to restyle the table, this is the only file you need to open.
 * Nothing below `:root` invents a colour: board.css, style.css and the JS
 * modules all draw from these custom properties. See THEMING.md for how to add
 * a skin.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * The one rule this palette is built on: **hue means occupied.**
 *
 * The board is mostly empty space — 25 wall squares, 15 pattern-line slots and
 * 7 floor slots per player — and for a long time all of them were painted in a
 * pale tint of the colour that belongs there. The result was a mosaic of forty
 * pastel squares in which the five real tiles had to be hunted for. So: a tile
 * that is *there* is saturated, raised and rimmed; a slot that is *empty* is a
 * neutral, recessed well with no glaze in it at all. The wall keeps its pattern
 * as a thin outlined diamond in the tile's own ink — enough to plan with, far
 * too faint to mistake for a tile. From a metre away the board now reads as
 * holes with a few jewels in it, which is what the cardboard one looks like.
 * ───────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  /* ============================================================ the table ==
   * Linen cloth, plaster boards, mortar between the wall squares. */
  --linen: #e6dbc6;
  --linen-dark: #d8c9ae;
  --linen-warm: #efe6d3;
  --linen-thread: rgba(255, 255, 255, .35);

  --plaster: #faf6ec;
  --plaster-hi: #fdfbf5;
  --plaster-edge: #e2d7bd;
  --plaster-sunk: #f2ebda;

  --grout: #bcab8c;
  --grout-deep: #a3906f;

  --ink: #2c2722;
  --ink-soft: #6a5d4e;
  --ink-faint: #92836f;

  /* ======================================================== the five glazes ==
   * Matched to the tiles you hold in your hand: deep cobalt, mustard ochre,
   * brick terracotta, near-black charcoal, and the pale one — "ice", a bright
   * cyan-turquoise that must read lighter than the cobalt at a glance.
   *
   *   --cN      the glaze itself (what a tile *is*)
   *   --cN-hi   the lit edge, top-left
   *   --cN-lo   the shaded edge, bottom-right
   *   --cN-rim  the fired rim drawn around a placed tile
   *   --cN-ink  the same hue as a line: outlines, text, the wall's diamonds
   *   --cN-wash a transparent wash of the hue, for highlight backgrounds */
  --c0: #16509f; --c0-hi: #5b8dd2; --c0-lo: #0a2f61; --c0-rim: #082851; --c0-ink: #123f7d;
  --c1: #e2a41f; --c1-hi: #f7ca55; --c1-lo: #96680a; --c1-rim: #7c5507; --c1-ink: #8a6009;
  --c2: #b8402c; --c2-hi: #dc7761; --c2-lo: #77220f; --c2-rim: #611a0b; --c2-ink: #8c2c18;
  --c3: #262b31; --c3-hi: #5d6673; --c3-lo: #0b0e12; --c3-rim: #000; --c3-ink: #2b3038;
  --c4: #4cc3d8; --c4-hi: #93e2ef; --c4-lo: #1b8399; --c4-rim: #146b7e; --c4-ink: #12707f;

  --c0-wash: rgba(22, 80, 159, .12);
  --c1-wash: rgba(226, 164, 31, .14);
  --c2-wash: rgba(184, 64, 44, .12);
  --c3-wash: rgba(38, 43, 49, .12);
  --c4-wash: rgba(76, 195, 216, .16);

  /* ========================================================== empty slots ==
   * One neutral, for every empty square on the board. Deliberately duller and
   * darker than any glaze and than the plaster around it, so a hole looks like
   * a hole. `--slot-motif` is how strongly the wall's colour hint shows, and
   * `--cN-motif` is the ink it is drawn in — the full glaze by default, so you
   * can read which colour belongs in a square from across the table. The square
   * stays a neutral well; only the outlined diamond in it carries the hue. */
  --slot: #c6bda9;
  --slot-lo: #b0a58e;
  --slot-rim: #978b73;
  --slot-shade: rgba(72, 56, 30, .34);
  --slot-motif: .9;
  --c0-motif: var(--c0);
  --c1-motif: var(--c1);
  --c2-motif: var(--c2);
  --c3-motif: var(--c3);
  --c4-motif: var(--c4);
  /* the motif's body: the same glaze thinned to a matte wash, as if a drop of
   * it had sunk into the plaster. Flat and translucent on purpose — a tile is
   * glossy, raised and opaque, and this must never be mistaken for one. */
  --c0-ghost: rgba(22, 80, 159, .34);
  --c1-ghost: rgba(226, 164, 31, .38);
  --c2-ghost: rgba(184, 64, 44, .34);
  --c3-ghost: rgba(38, 43, 49, .30);
  --c4-ghost: rgba(76, 195, 216, .38);

  /* ============================================================== fixtures ==
   * The bowls the tiles sit in, the marker chip, the lid. */
  --dish: #f4ead4;
  --dish-hi: #fffdf6;
  --dish-lo: #dccdb0;
  --dish-rim: var(--grout);
  --marker-face: #fffdf4;
  --marker-lo: #e9dcc0;
  --lid-receiving: rgba(226, 164, 31, .2);

  /* ============================================================== meaning ==
   * The four things the status band can be about, and the coach's three
   * verdicts. Every one of them is a glaze, so the page never invents an
   * accent colour that is not on the table. */
  --tone-you: var(--c4);
  --tone-ai: var(--c0);
  --tone-scoring: var(--c1);
  --tone-end: var(--c2);
  --tone-idle: var(--grout);

  --grade-best: var(--c0-ink);
  --grade-slip: var(--c1-ink);
  --grade-blunder: var(--c2-ink);

  --gain: var(--c0-ink);
  --loss: var(--c2-ink);

  /* ================================================================ chrome ==
   * Panels, buttons, fields — the furniture around the table. */
  --panel-top: #fdfbf5;
  --panel-bottom: var(--plaster);
  --panel-edge: var(--plaster-edge);
  --field-bg: #fffdf7;
  --btn-top: #fffdf8;
  --btn-bottom: #f0e7d5;
  --btn-top-hover: #fffefb;
  --btn-bottom-hover: #f6efe1;
  --btn-primary-top: #3d76bd;
  --btn-primary-bottom: var(--c0-lo);
  --btn-primary-top-hover: #4d84c8;
  --btn-primary-bottom-hover: #1c5296;
  --btn-primary-ink: #fdfaf2;
  --focus-ring: var(--c4-lo);

  --topbar-top: #fdfaf3;
  --topbar-bottom: #f4ecdc;
  --engine-top: #f6efe0;
  --engine-bottom: #f1e8d5;
  --badge-bg: var(--c0-wash);
  --badge-edge: rgba(22, 80, 159, .28);
  --toast-bg: #fffdf6;

  --shadow-panel: 0 1px 0 #fffdf7 inset, 0 10px 26px -18px rgba(60, 44, 20, .55);
  --shadow-tile: 0 2px 3px -1px rgba(48, 34, 14, .5);
  --shadow-tile-raised: 0 6px 10px -4px rgba(48, 34, 14, .6);

  /* ============================================================== geometry ==
   * Not colour, but the same argument: one place to change it. */
  --tile: 32px;
  --radius: 3px;

  --font-display: Palatino, "Palatino Linotype", "Book Antiqua", "Iowan Old Style", Georgia, serif;
  --font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --font-label: "Avenir Next Condensed", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
}

/* ================================================================== skins ==
 * A skin is this same list of properties, redeclared. Set it with
 * `document.documentElement.dataset.skin = "dusk"`. THEMING.md walks through
 * writing one; this is the worked example that proves the mechanism.
 *
 * "Dusk": the same factory, lit at the end of the day — a slate table, cooler
 * plaster, and glazes fired one stop deeper. */
:root[data-skin="dusk"] {
  --linen: #3a3730;
  --linen-dark: #2c2a24;
  --linen-warm: #45413a;
  --linen-thread: rgba(255, 255, 255, .05);

  --plaster: #4a4640;
  --plaster-hi: #565149;
  --plaster-edge: #625c52;
  --plaster-sunk: #423e38;

  --grout: #6d6659;
  --grout-deep: #575146;

  --ink: #f2ece0;
  --ink-soft: #c3b9a7;
  --ink-faint: #978d7c;

  --c0: #3d79cf; --c0-hi: #86aee6; --c0-lo: #1c4478; --c0-rim: #16375f; --c0-ink: #93b6e8;
  --c1: #f0b53c; --c1-hi: #ffd67a; --c1-lo: #a2740f; --c1-rim: #7d590a; --c1-ink: #f3c463;
  --c2: #d4573f; --c2-hi: #ec8b74; --c2-lo: #872c17; --c2-rim: #6a200f; --c2-ink: #e88b73;
  --c3: #1b1f24; --c3-hi: #4c545f; --c3-lo: #06080a; --c3-rim: #000; --c3-ink: #9aa3b0;
  --c4: #5fd3e8; --c4-hi: #a6ecf6; --c4-lo: #1d8ca3; --c4-rim: #146b7e; --c4-ink: #7fdcec;

  --c0-wash: rgba(61, 121, 207, .2);
  --c1-wash: rgba(240, 181, 60, .18);
  --c2-wash: rgba(212, 87, 63, .18);
  --c3-wash: rgba(27, 31, 36, .3);
  --c4-wash: rgba(95, 211, 232, .18);

  --slot: #37342e;
  --slot-lo: #2b2823;
  --slot-rim: #514b41;
  --slot-shade: rgba(0, 0, 0, .5);
  --slot-motif: .9;
  /* charcoal's glaze is darker than the dusk slot it sits in, so its motif is
   * drawn in the charcoal *ink* instead — same hue, readable at night */
  --c3-motif: var(--c3-ink);
  --c0-ghost: rgba(61, 121, 207, .34);
  --c1-ghost: rgba(240, 181, 60, .34);
  --c2-ghost: rgba(212, 87, 63, .34);
  --c3-ghost: rgba(154, 163, 176, .26);
  --c4-ghost: rgba(95, 211, 232, .32);

  --dish: #514c44;
  --dish-hi: #605a50;
  --dish-lo: #423e37;
  --marker-face: #6a6459;
  --marker-lo: #524d44;

  --panel-top: #514c44;
  --panel-bottom: var(--plaster);
  --field-bg: #423e38;
  --btn-top: #5a544a;
  --btn-bottom: #48433c;
  --btn-top-hover: #665f54;
  --btn-bottom-hover: #524c44;
  --btn-primary-top: #2f63b0;
  --btn-primary-bottom: #16375f;
  --btn-primary-top-hover: #3f76c6;
  --btn-primary-bottom-hover: #102a4a;
  --btn-primary-ink: #f4f8ff;

  --topbar-top: #4f4a42;
  --topbar-bottom: #423e38;
  --engine-top: #494540;
  --engine-bottom: #423e38;
  --badge-bg: var(--c0-wash);
  --badge-edge: rgba(61, 121, 207, .4);
  --toast-bg: #514c44;

  --grade-best: var(--c0-ink);
  --grade-slip: var(--c1-ink);
  --grade-blunder: var(--c2-ink);
  --gain: var(--c4-ink);
  --loss: var(--c2-ink);

  --shadow-panel: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 26px -18px rgba(0, 0, 0, .8);
  --shadow-tile: 0 2px 3px -1px rgba(0, 0, 0, .6);
  --shadow-tile-raised: 0 6px 10px -4px rgba(0, 0, 0, .7);
}