/**
 * Backgammon — centralna paleta kolorów
 *
 * Aby zmienić kolorystykę aplikacji, edytuj sekcję „Paleta bazowa” poniżej.
 * Tokeny pochodne i semantyczne aktualizują się automatycznie (color-mix).
 */

:root {
  /* ── Paleta bazowa (źródło prawdy — edytuj tutaj) ── */

  /* Plansza — kremowa skóra + ciemne trójkąty */
  --palette-wood-dark: #2a1e16;
  --palette-board-surface: #f0e6d6;
  --palette-board-surface-deep: #e3d5c0;
  --palette-point-light: #c4a882;
  --palette-point-medium: #3d2b1f;

  /* Panele UI (sidebar, lobby, dialogi) — ciepłe brązy */
  --palette-panel: #352619;
  --palette-panel-deep: #261c14;
  --palette-panel-alt: #1c140e;
  --palette-panel-elevated: #423024;
  --palette-shell: #18120c;
  --palette-scrim: #0a0806;

  /* Gracze — skórzane pionki (brąz / czerń) */
  --palette-player-red: #4a3528;
  --palette-player-red-hover: #5a4030;
  --palette-player-red-soft: #6b5040;
  --palette-player-black: #141414;
  --palette-player-black-green: #8a7a6a;

  /* Akcent (szampański / krem) */
  --palette-accent: #d4c4a8;
  --palette-accent-light: #ebe0cc;
  --palette-accent-bright: #e8dcc8;
  --palette-accent-amber: #c9923a;

  /* Statusy */
  --palette-success: #8fd48f;
  --palette-warning: #ffc478;
  --palette-danger: #b91c1c;
  --palette-bear-off: #2f6b2a;

  /* Kości bursztynowe i tekst na planszy */
  --palette-die-amber: #c58b2a;
  --palette-die-amber-light: #e0a840;
  --palette-die-amber-deep: #9a6820;
  --palette-die-face: #d49838;
  --palette-die-pip-dark: #ffffff;
  --palette-die-pip-light: #ffffff;
  --palette-text-on-board: #2a2018;
  --palette-text-muted: #6a5a48;
  --palette-point-number: #8a7a68;

  /* Neutralne (UI na ciemnym tle) */
  --palette-on-dark: #ffffff;
  --palette-on-dark-soft: #f2f2f2;
  --palette-on-dark-muted: #ececec;
  --palette-shadow: #000000;

  /* Podpowiedzi ruchu na planszy */
  --palette-legal-move: #c9923a;
  --palette-movable-hint: #a89070;

  /* Metal — chromowana obwódka pionków */
  --palette-metal-light: #f0f0f0;
  --palette-metal-mid: #c8c8c8;
  --palette-metal-dark: #686868;
  --palette-metal-shine: #ffffff;

  /* Skóra pionków */
  --palette-leather-black: #141414;
  --palette-leather-black-mid: #222020;
  --palette-leather-black-deep: #0a0a0a;
  --palette-leather-black-highlight: #3a3836;
  --palette-leather-brown: #3d2b1f;
  --palette-leather-brown-mid: #4a3528;
  --palette-leather-brown-deep: #2a1e16;
  --palette-leather-brown-highlight: #5c4332;

  /* Tekstura skóry (SVG noise) */
  --texture-leather: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* Aliasy kompatybilności (dawniej marmur) */
  --palette-marble-black-base: var(--palette-leather-black);
  --palette-marble-black-mid: var(--palette-leather-black-mid);
  --palette-marble-black-deep: var(--palette-leather-black-deep);
  --palette-marble-red-base: var(--palette-leather-brown);
  --palette-marble-red-mid: var(--palette-leather-brown-mid);
  --palette-marble-red-deep: var(--palette-leather-brown-deep);
  --palette-marble-cream: var(--palette-board-surface);
  --palette-marble-cream-soft: var(--palette-accent-light);
  --palette-marble-rim-light: var(--palette-metal-light);
  --palette-marble-rim-red: var(--palette-metal-mid);
  --palette-marble-red-cream: var(--palette-leather-brown-highlight);
  --palette-marble-red-cream-soft: var(--palette-accent-light);
  --palette-marble-red-highlight-pale: var(--palette-leather-brown-highlight);

  /* Taca / elementy planszy */
  --palette-tray-bg: #352619;
  --palette-tray-bg-hover: #423024;
  --palette-tray-text: #f5f0e8;
  --palette-tray-red-top: #5a4030;
  --palette-tray-red-bottom: #3d2b1f;
  --palette-tray-wood-top: #2a2018;
  --palette-tray-wood-mid: #1a1410;
  --palette-tray-wood-bottom: #0e0c0a;
  --palette-tray-red-mid: var(--palette-leather-brown-mid);
  --palette-tray-red-deep: var(--palette-leather-brown-deep);
  --palette-cube-border: var(--palette-metal-dark);
  --palette-cube-face-top: var(--palette-leather-brown);
  --palette-cube-face-mid: var(--palette-leather-black);
  --palette-cube-face-bottom: var(--palette-leather-brown-deep);
  --palette-cube-text: var(--palette-accent-light);
  --palette-cube-outline-dark: var(--palette-metal-mid);
  --palette-overlay-dark: #1a120c;
  --palette-marble-tan: var(--palette-point-light);
  --palette-marble-brown: var(--palette-leather-brown);
  --palette-marble-red-shadow: var(--palette-leather-brown-deep);
  --palette-marble-red-highlight: var(--palette-leather-brown-highlight);
  --palette-marble-black-green-dark: var(--palette-leather-black-deep);
  --palette-marble-black-green-mid: var(--palette-leather-black-mid);
  --palette-marble-red-mid-dark: var(--palette-leather-brown-deep);

  /* Historia ruchów — segmenty */
  --palette-history-hit: #b91c1c;

  /* ── Layout (wymiary UI) ── */
  --layout-sidebar-width: 360px;

  /* ── Pochodne: przezroczystości (color-mix) ── */
  --on-dark-95: color-mix(in srgb, var(--palette-on-dark) 95%, transparent);
  --on-dark-92: color-mix(in srgb, var(--palette-on-dark) 92%, transparent);
  --on-dark-88: color-mix(in srgb, var(--palette-on-dark) 88%, transparent);
  --on-dark-82: color-mix(in srgb, var(--palette-on-dark) 82%, transparent);
  --on-dark-80: color-mix(in srgb, var(--palette-on-dark) 80%, transparent);
  --on-dark-72: color-mix(in srgb, var(--palette-on-dark) 72%, transparent);
  --on-dark-65: color-mix(in srgb, var(--palette-on-dark) 65%, transparent);
  --on-dark-62: color-mix(in srgb, var(--palette-on-dark) 62%, transparent);
  --on-dark-55: color-mix(in srgb, var(--palette-on-dark) 55%, transparent);
  --on-dark-52: color-mix(in srgb, var(--palette-on-dark) 52%, transparent);
  --on-dark-48: color-mix(in srgb, var(--palette-on-dark) 48%, transparent);
  --on-dark-46: color-mix(in srgb, var(--palette-on-dark) 46%, transparent);
  --on-dark-45: color-mix(in srgb, var(--palette-on-dark) 45%, transparent);
  --on-dark-42: color-mix(in srgb, var(--palette-on-dark) 42%, transparent);
  --on-dark-38: color-mix(in srgb, var(--palette-on-dark) 38%, transparent);
  --on-dark-32: color-mix(in srgb, var(--palette-on-dark) 32%, transparent);
  --on-dark-28: color-mix(in srgb, var(--palette-on-dark) 28%, transparent);
  --on-dark-24: color-mix(in srgb, var(--palette-on-dark) 24%, transparent);
  --on-dark-22: color-mix(in srgb, var(--palette-on-dark) 22%, transparent);
  --on-dark-20: color-mix(in srgb, var(--palette-on-dark) 20%, transparent);
  --on-dark-16: color-mix(in srgb, var(--palette-on-dark) 16%, transparent);
  --on-dark-14: color-mix(in srgb, var(--palette-on-dark) 14%, transparent);
  --on-dark-12: color-mix(in srgb, var(--palette-on-dark) 12%, transparent);
  --on-dark-10: color-mix(in srgb, var(--palette-on-dark) 10%, transparent);
  --on-dark-08: color-mix(in srgb, var(--palette-on-dark) 8%, transparent);
  --on-dark-07: color-mix(in srgb, var(--palette-on-dark) 7%, transparent);
  --on-dark-06: color-mix(in srgb, var(--palette-on-dark) 6%, transparent);
  --on-dark-04: color-mix(in srgb, var(--palette-on-dark) 4%, transparent);

  --shadow-45: color-mix(in srgb, var(--palette-shadow) 45%, transparent);
  --shadow-42: color-mix(in srgb, var(--palette-shadow) 42%, transparent);
  --shadow-35: color-mix(in srgb, var(--palette-shadow) 35%, transparent);
  --shadow-32: color-mix(in srgb, var(--palette-shadow) 32%, transparent);
  --shadow-28: color-mix(in srgb, var(--palette-shadow) 28%, transparent);
  --shadow-25: color-mix(in srgb, var(--palette-shadow) 25%, transparent);
  --shadow-22: color-mix(in srgb, var(--palette-shadow) 22%, transparent);
  --shadow-20: color-mix(in srgb, var(--palette-shadow) 20%, transparent);
  --shadow-18: color-mix(in srgb, var(--palette-shadow) 18%, transparent);
  --shadow-16: color-mix(in srgb, var(--palette-shadow) 16%, transparent);
  --shadow-14: color-mix(in srgb, var(--palette-shadow) 14%, transparent);
  --shadow-12: color-mix(in srgb, var(--palette-shadow) 12%, transparent);
  --shadow-08: color-mix(in srgb, var(--palette-shadow) 8%, transparent);
  --shadow-04: color-mix(in srgb, var(--palette-shadow) 4%, transparent);
  --shadow-85: color-mix(in srgb, var(--palette-shadow) 85%, transparent);
  --shadow-95: color-mix(in srgb, var(--palette-shadow) 95%, transparent);

  --accent-95: color-mix(in srgb, var(--palette-accent) 95%, transparent);
  --accent-70: color-mix(in srgb, var(--palette-accent) 70%, transparent);
  --accent-65: color-mix(in srgb, var(--palette-accent) 65%, transparent);
  --accent-55: color-mix(in srgb, var(--palette-accent) 55%, transparent);
  --accent-35: color-mix(in srgb, var(--palette-accent) 35%, transparent);
  --accent-28: color-mix(in srgb, var(--palette-accent) 28%, transparent);
  --accent-25: color-mix(in srgb, var(--palette-accent) 25%, transparent);
  --accent-24: color-mix(in srgb, var(--palette-accent) 24%, transparent);
  --accent-22: color-mix(in srgb, var(--palette-accent) 22%, transparent);
  --accent-18: color-mix(in srgb, var(--palette-accent) 18%, transparent);
  --accent-light-75: color-mix(in srgb, var(--palette-accent-light) 75%, transparent);

  --player-red-42: color-mix(in srgb, var(--palette-player-red-soft) 42%, transparent);
  --player-red-14: color-mix(in srgb, var(--palette-player-red-soft) 14%, transparent);
  --player-red-75: color-mix(in srgb, var(--palette-player-red) 75%, transparent);
  --player-black-38: color-mix(in srgb, var(--palette-player-black-green) 38%, transparent);
  --player-black-12: color-mix(in srgb, var(--palette-player-black-green) 12%, transparent);

  --warning-95: color-mix(in srgb, var(--palette-warning) 95%, transparent);
  --legal-move-60: color-mix(in srgb, var(--palette-legal-move) 60%, transparent);
  --legal-move-95: color-mix(in srgb, var(--palette-legal-move) 95%, transparent);
  --legal-amber-95: color-mix(in srgb, var(--palette-accent-amber) 95%, transparent);
  --legal-amber-40: color-mix(in srgb, var(--palette-accent-amber) 40%, transparent);
  --movable-hint-85: color-mix(in srgb, var(--palette-movable-hint) 85%, transparent);
  --movable-hint-70: color-mix(in srgb, var(--palette-movable-hint) 70%, transparent);
  --movable-hint-55: color-mix(in srgb, var(--palette-movable-hint) 55%, transparent);
  --movable-hint-35: color-mix(in srgb, var(--palette-movable-hint) 35%, transparent);

  --shadow-55: color-mix(in srgb, var(--palette-shadow) 55%, transparent);
  --shadow-40: color-mix(in srgb, var(--palette-shadow) 40%, transparent);
  --shadow-38: color-mix(in srgb, var(--palette-shadow) 38%, transparent);
  --shadow-30: color-mix(in srgb, var(--palette-shadow) 30%, transparent);

  --on-dark-94: color-mix(in srgb, var(--palette-on-dark) 94%, transparent);
  --on-dark-58: color-mix(in srgb, var(--palette-on-dark) 58%, transparent);
  --on-dark-35: color-mix(in srgb, var(--palette-on-dark) 35%, transparent);
  --on-dark-15: color-mix(in srgb, var(--palette-on-dark) 15%, transparent);

  --accent-50: color-mix(in srgb, var(--palette-accent) 50%, transparent);
  --accent-32: color-mix(in srgb, var(--palette-accent) 32%, transparent);

  --movable-hint-45: color-mix(in srgb, var(--palette-movable-hint) 45%, transparent);
  --legal-move-25: color-mix(in srgb, var(--palette-legal-move) 25%, transparent);
  --legal-amber-70: color-mix(in srgb, var(--palette-accent-amber) 70%, transparent);

  --panel-alt-99: color-mix(in srgb, var(--palette-panel-alt) 99%, transparent);

  --leather-highlight-black: color-mix(in srgb, var(--palette-leather-black-highlight) 55%, transparent);
  --leather-highlight-brown: color-mix(in srgb, var(--palette-leather-brown-highlight) 50%, transparent);
  --metal-ring-light: color-mix(in srgb, var(--palette-metal-light) 90%, transparent);
  --metal-ring-dark: color-mix(in srgb, var(--palette-metal-dark) 85%, transparent);
  --marble-swirl-black: var(--leather-highlight-black);
  --marble-swirl-black-soft: color-mix(in srgb, var(--palette-leather-black-highlight) 35%, transparent);
  --marble-swirl-red: var(--leather-highlight-brown);
  --marble-swirl-red-soft: color-mix(in srgb, var(--palette-leather-brown-highlight) 30%, transparent);
  --marble-rim-black: var(--metal-ring-dark);
  --marble-rim-red: var(--metal-ring-dark);
  --marble-cream-95: color-mix(in srgb, var(--palette-marble-cream) 95%, transparent);
  --marble-cream-42: color-mix(in srgb, var(--palette-marble-cream) 42%, transparent);
  --marble-tan-55: color-mix(in srgb, var(--palette-marble-tan) 55%, transparent);
  --marble-brown-42: color-mix(in srgb, var(--palette-marble-brown) 42%, transparent);
  --marble-red-shadow-38: color-mix(in srgb, var(--palette-marble-red-shadow) 38%, transparent);
  --marble-red-highlight-92: color-mix(in srgb, var(--palette-marble-red-highlight-pale) 92%, transparent);
  --marble-red-highlight-38: color-mix(in srgb, var(--palette-marble-red-highlight-pale) 38%, transparent);
  --marble-red-highlight-50: color-mix(in srgb, var(--palette-marble-red-highlight) 50%, transparent);
  --cube-border-85: color-mix(in srgb, var(--palette-cube-border) 85%, transparent);
  --overlay-dark-94: color-mix(in srgb, var(--palette-overlay-dark) 94%, transparent);
  --cube-outline-dark-75: color-mix(in srgb, var(--palette-cube-outline-dark) 75%, transparent);

  --shell-overlay-88: color-mix(in srgb, var(--palette-shell) 88%, transparent);
  --scrim-62: color-mix(in srgb, var(--palette-scrim) 62%, transparent);
  --panel-98: color-mix(in srgb, var(--palette-panel) 98%, transparent);
  --panel-deep-99: color-mix(in srgb, var(--palette-panel-deep) 99%, transparent);
  --player-red-20: color-mix(in srgb, var(--palette-player-red-soft) 20%, transparent);
  --player-black-20: color-mix(in srgb, var(--palette-player-black-green) 20%, transparent);

  /* ── Semantyczne tokeny UI ── */
  --ui-body-bg: #c9bba8;
  --ui-sidebar-bg: var(--palette-panel);
  --ui-lobby-bg: var(--palette-panel);
  --ui-text-on-dark: var(--palette-on-dark);
  --ui-text-on-dark-soft: var(--palette-on-dark-soft);
  --ui-text-accent: var(--palette-accent);
  --ui-text-accent-light: var(--palette-accent-light);
  --ui-text-success: var(--palette-success);
  --ui-text-warning: var(--warning-95);
  --ui-btn-primary-bg: var(--palette-player-red);
  --ui-btn-primary-hover: var(--palette-player-red-hover);

  /* ── Aliasy planszy (zachowane dla kompatybilności) ── */
  --frame: var(--palette-wood-dark);
  --frame-dark: var(--palette-wood-dark);
  --surface: var(--palette-board-surface);
  --point-light: var(--palette-point-light);
  --point-medium: var(--palette-point-medium);
  --checker-black: var(--palette-player-black);
  --checker-red: var(--palette-player-red);
  --die-white: var(--palette-die-face);
  --die-red: var(--palette-player-red);
  --die-pip-dark: var(--palette-die-pip-dark);
  --die-pip-light: var(--palette-die-pip-light);
  --legal-move: var(--legal-move-60);
  --movable-source: var(--movable-hint-55);
  --selected-glow: var(--legal-move-60);
  --text: var(--palette-text-on-board);
  --text-muted: var(--palette-text-muted);
}