/*
 * Chesset theme — the single source of truth for every color in the app.
 * Never hardcode a color anywhere else (CSS, inline styles, SVG or JS);
 * reference one of these variables instead. Add new tokens here when needed.
 */
:root {
  /* Brand */
  --color-primary: #2a703c;
  --color-primary-hover: #338a4a;
  --color-primary-active: #225c31;
  --color-accent: #c8fadb;
  --color-accent-hover: #b0f2c9;
  --color-on-primary: #ffffff;
  --color-on-accent: #143a1f;

  /* Surfaces */
  --color-bg: #0e1712;
  --color-surface: #15221a;
  --color-surface-2: #1c2d22;
  --color-surface-3: #24392b;
  --color-border: #2c4434;
  --color-overlay: rgba(0, 0, 0, 0.35);
  --color-backdrop: rgba(5, 10, 7, 0.72);

  /* Text */
  --color-text: #e6f4ea;
  --color-text-muted: #94ad9c;
  --color-text-faint: #64806d;

  /* Status */
  --color-win: #6fcf86;
  --color-loss: #e5534b;
  --color-draw: #9aa5a0;
  --color-error: #ff7b72;

  /* Board: the active square colors. Settings -> Board switches presets via data-board on <html>
     (rules below); "custom" colors are set inline on <html> by js/settings.js. */
  --board-light: var(--board-green-light);
  --board-dark: var(--board-green-dark);
  --board-coord-on-light: var(--board-green-dark);
  --board-coord-on-dark: var(--board-green-light);
  --board-highlight: rgba(247, 236, 89, 0.5);
  --board-selected: rgba(255, 204, 0, 0.55);
  --board-premove: rgba(214, 64, 52, 0.5);
  --board-target: rgba(12, 32, 18, 0.35);
  --board-check: rgba(250, 65, 45, 0.9);
  --arrow-best: rgba(66, 135, 245, 0.85);
  --arrow-drawn: #f08a24; /* arrows drawn with the right mouse button */

  /* Board presets (light / dark squares). "green" is the default. */
  --board-green-light: #eeeed2;
  --board-green-dark: #769656;
  --board-mint-light: var(--color-accent);
  --board-mint-dark: #4c9a5f;
  --board-wood-light: #f0d9b5;
  --board-wood-dark: #b58863;
  --board-ice-light: #dee3e6;
  --board-ice-dark: #8ca2ad;
  --board-stone-light: #e6e6e6;
  --board-stone-dark: #8f8f8f;
  --board-violet-light: #e8ddf3;
  --board-violet-dark: #9573b5;

  /* Game clocks */
  --clock-bg: var(--color-surface-3);
  --clock-text: var(--color-text);
  --clock-active-bg: var(--color-accent);
  --clock-active-text: var(--color-on-accent);
  --clock-low: var(--color-loss);

  /* Evaluation bar / graph */
  --eval-white: #f2f7f3;
  --eval-black: #1a1f1c;
  --eval-text-on-white: #1a1f1c;
  --eval-text-on-black: #f2f7f3;
  --eval-graph-bg: #26302a;
  --eval-graph-marker: var(--color-accent);

  /* Move classifications */
  --class-brilliant: #1baca6;
  --class-great: #5c8bb0;
  --class-best: #81b64c;
  --class-excellent: #96bc4b;
  --class-good: #8fae82;
  --class-book: #a88865;
  --class-inaccuracy: #e6b422;
  --class-mistake: #ffa459;
  --class-miss: #ff7769;
  --class-blunder: #fa412d;
  --class-text: #ffffff;

  /* Layout & type */
  --radius: 10px;
  --radius-sm: 6px;
  --sidebar-width: 380px;
  --panel-width: 420px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Board presets chosen in Settings (data-board on <html>; "green" uses the defaults above). */
:root[data-board="mint"] {
  --board-light: var(--board-mint-light);
  --board-dark: var(--board-mint-dark);
  --board-coord-on-light: var(--color-primary);
  --board-coord-on-dark: var(--board-mint-light);
}
:root[data-board="wood"] {
  --board-light: var(--board-wood-light);
  --board-dark: var(--board-wood-dark);
  --board-coord-on-light: var(--board-wood-dark);
  --board-coord-on-dark: var(--board-wood-light);
}
:root[data-board="ice"] {
  --board-light: var(--board-ice-light);
  --board-dark: var(--board-ice-dark);
  --board-coord-on-light: var(--board-ice-dark);
  --board-coord-on-dark: var(--board-ice-light);
}
:root[data-board="stone"] {
  --board-light: var(--board-stone-light);
  --board-dark: var(--board-stone-dark);
  --board-coord-on-light: var(--board-stone-dark);
  --board-coord-on-dark: var(--board-stone-light);
}
:root[data-board="violet"] {
  --board-light: var(--board-violet-light);
  --board-dark: var(--board-violet-dark);
  --board-coord-on-light: var(--board-violet-dark);
  --board-coord-on-dark: var(--board-violet-light);
}