/* SPDX-License-Identifier: AGPL-3.0-or-later */
/* CHEZABLE — colour tokens, dark and light.
 *
 * The one place a colour is defined. site.css imports it and the toy
 * (board.html) links it, so the two cannot drift apart again.
 *
 * Dark is the default. Light applies when the reader picks it, or when the
 * reader picks nothing and their system asks for light. The light set is
 * written twice — once for the system preference, once for the explicit
 * choice — because CSS cannot share a block between a media query and an
 * attribute selector, and the alternative is a page that ignores the system
 * setting with JavaScript off.
 *
 * Contrast, measured, not eyeballed: every text colour (text, body, muted,
 * faint, clay, clay-soft, gold, danger) clears 4.5:1 against every surface it
 * sits on (bg, page, bg2, surface), in both sets, and ink on a clay button
 * clears it too. Check a new colour against all four before adding it.
 */

:root {
  color-scheme: dark;
  --bg:#0f0d0a; --page:#161310; --bg2:#1b1712; --surface:#201b15; --surface-hi:#262019;
  --deep:#12100d; --table:#14100c;
  --line:#37302a; --line-soft:#2b251f;
  --text:#ede4d4; --body:#cfc4b2; --muted:#9c9081;
  /* Was #6f675b, which read at 3.1–3.5:1: the footer and language switcher. */
  --faint:#8d8477;
  --clay:#d97757; --clay-soft:#e8a184; --gold:#c9a15e; --danger:#e0675b;
  --on-clay:#1b120d;
  --clay-line:rgba(217,119,87,.45); --gold-line:rgba(201,161,94,.5);
  --grid-line:rgba(237,228,212,.025); --selection:rgba(217,119,87,.4);
  --appbar:rgba(15,13,10,.92); --shadow:rgba(0,0,0,.45);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:#f6f1e7; --page:#efe8db; --bg2:#ece4d5; --surface:#fbf8f2; --surface-hi:#f3ede2;
    --deep:#e9e1d2; --table:#e4dccb;
    --line:#d6cbb7; --line-soft:#e2d9c8;
    --text:#1d1813; --body:#3b3329; --muted:#5f5548; --faint:#6b6153;
    --clay:#a14526; --clay-soft:#84361b; --gold:#7f5c12; --danger:#a8382c;
    --on-clay:#fffaf3;
    --clay-line:rgba(161,69,38,.45); --gold-line:rgba(127,92,18,.5);
    --grid-line:rgba(29,24,19,.04); --selection:rgba(161,69,38,.22);
    --appbar:rgba(246,241,231,.92); --shadow:rgba(60,45,25,.18);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f6f1e7; --page:#efe8db; --bg2:#ece4d5; --surface:#fbf8f2; --surface-hi:#f3ede2;
  --deep:#e9e1d2; --table:#e4dccb;
  --line:#d6cbb7; --line-soft:#e2d9c8;
  --text:#1d1813; --body:#3b3329; --muted:#5f5548; --faint:#6b6153;
  --clay:#a14526; --clay-soft:#84361b; --gold:#7f5c12; --danger:#a8382c;
  --on-clay:#fffaf3;
  --clay-line:rgba(161,69,38,.45); --gold-line:rgba(127,92,18,.5);
  --grid-line:rgba(29,24,19,.04); --selection:rgba(161,69,38,.22);
  --appbar:rgba(246,241,231,.92); --shadow:rgba(60,45,25,.18);
}

/* The theme switch in the app bar: system, light, dark. */
.theme-switch {
  display:inline-flex; gap:2px; padding:2px; margin-left:8px;
  border:1px solid var(--line); border-radius:9px; background:var(--bg2);
}
.theme-switch button {
  display:grid; place-items:center; width:26px; height:24px;
  border:0; border-radius:7px; background:none; color:var(--muted); cursor:pointer;
}
.theme-switch button:hover { color:var(--text) }
.theme-switch button[aria-pressed="true"] { background:var(--surface); color:var(--clay); box-shadow:0 0 0 1px var(--line) }
.theme-switch svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }