/* Дизайн-токены. Тема переключается атрибутом data-theme на <html>. */
:root {
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --radius: 12px;
  --radius-sm: 8px;
  --gap: 16px;

  /* светлая тема */
  --bg: #f2eee5;
  --surface: #fffdf8;
  --surface-2: #f6f1e6;
  --ink: #211d18;
  --ink-2: #595247;
  --ink-3: #8a8274;
  --line: #e0d8c8;
  --accent: #0e6f66;
  --accent-ink: #ffffff;
  --accent-soft: #d6ebe7;
  --danger: #b4372b;
  --ok: #2e7d4e;
  --shadow: 0 1px 2px rgb(40 30 10 / 6%), 0 8px 24px rgb(40 30 10 / 7%);

  /* доска */
  --fog: #8794a3;
  --fog-opacity: 0.9;
  --board-filter: none;
  --mark-last: rgb(255 208 0 / 38%);
  --mark-selected: rgb(30 140 255 / 42%);
  --hint: rgb(25 40 30 / 30%);
  --hint-capture: rgb(190 45 35 / 65%);
}

:root[data-theme="dark"] {
  --bg: #12151a;
  --surface: #1a1f26;
  --surface-2: #222833;
  --ink: #ebe8e1;
  --ink-2: #b2aea4;
  --ink-3: #7f7c74;
  --line: #2d3541;
  --accent: #4fd0c0;
  --accent-ink: #07211e;
  --accent-soft: #16322f;
  --danger: #ff7a6b;
  --ok: #6fd39a;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px rgb(0 0 0 / 35%);

  --fog: #0b0e13;
  --fog-opacity: 0.88;
  --board-filter: brightness(0.9) saturate(0.95);
  --mark-last: rgb(255 208 0 / 30%);
  --hint: rgb(0 0 0 / 38%);
  --hint-capture: rgb(255 110 95 / 75%);
}

/* палитры доски */
:root, :root[data-board="moss"] { --sq-light: #ecedd0; --sq-dark: #769656; }
:root[data-board="wood"] { --sq-light: #f0d9b5; --sq-dark: #b58863; }
:root[data-board="slate"] { --sq-light: #dfe4e8; --sq-dark: #7b93a6; }

/* цвета фигур */
.piece-white { --pf: #fbf8f0; --ps: #2a251f; --pd: #2a251f; }
.piece-black { --pf: #3b352e; --ps: #0e0c0a; --pd: #ede6d6; }
.set-flat.piece-white { --pf: #f5f0e4; --ps: #5a5044; --show-detail: none; }
.set-flat.piece-black { --pf: #28333f; --ps: #131920; --show-detail: none; }
.set-geometric.piece-white { --pf: #fffaf0; }
.set-geometric.piece-black { --pf: #2c2b3a; --ps: #0d0c14; }