/**
 * Motywy aplikacji i planszy — nadpisują paletę z theme.css (klasa na body).
 */

body.app-theme--marble,
html.app-theme--marble {
  --palette-wood-dark: #1a4835;
  --palette-board-surface: #faf7f2;
  --palette-board-surface-deep: #ede6da;
  --palette-point-light: #efe8dc;
  --palette-point-medium: #2d6b52;
  --palette-panel: #1f4032;
  --palette-panel-deep: #152e24;
  --palette-panel-alt: #0f2018;
  --palette-panel-elevated: #285040;
  --palette-shell: #0c1812;
  --palette-scrim: #060a08;
  --palette-player-red: #5a3828;
  --palette-player-red-hover: #6a4432;
  --palette-player-red-soft: #7a5440;
  --palette-player-black: #141414;
  --palette-player-black-green: #7a9888;
  --palette-accent: #c8dcc0;
  --palette-accent-light: #e0ecd8;
  --palette-accent-bright: #eef4ea;
  --palette-accent-amber: #b88838;
  --palette-die-amber: #c58b2a;
  --palette-die-amber-light: #e0a840;
  --palette-die-amber-deep: #9a6820;
  --palette-die-face: #d49838;
  --palette-text-on-board: #1a2820;
  --palette-text-muted: #5a6858;
  --palette-point-number: #6a8878;
  --palette-legal-move: #b88838;
  --palette-movable-hint: #889878;
  --palette-tray-bg: #1f4032;
  --palette-tray-bg-hover: #285040;
  --palette-tray-text: #f0f4f0;
  --palette-tray-red-top: #6a4432;
  --palette-tray-red-bottom: #3d2b1f;
  --palette-tray-wood-top: #1a3028;
  --palette-tray-wood-mid: #101c18;
  --palette-tray-wood-bottom: #080e0c;
  --ui-body-bg: #8aab98;
}

body.app-theme--midnight,
html.app-theme--midnight {
  --palette-wood-dark: #1a2230;
  --palette-board-surface: #2e3848;
  --palette-board-surface-deep: #252e3c;
  --palette-point-light: #3d4a5e;
  --palette-point-medium: #141c28;
  --palette-panel: #121820;
  --palette-panel-deep: #0c1018;
  --palette-panel-alt: #080c12;
  --palette-panel-elevated: #1a2230;
  --palette-shell: #060810;
  --palette-scrim: #030408;
  --palette-player-red: #6a5048;
  --palette-player-red-hover: #7a6058;
  --palette-player-red-soft: #8a7068;
  --palette-player-black: #0a0a0c;
  --palette-player-black-green: #6a7888;
  --palette-accent: #8ab4d4;
  --palette-accent-light: #b8d4ec;
  --palette-accent-bright: #d0e4f4;
  --palette-accent-amber: #d4a848;
  --palette-die-amber: #c49838;
  --palette-die-amber-light: #e0b858;
  --palette-die-amber-deep: #987028;
  --palette-die-face: #d0a848;
  --palette-die-pip-dark: #ffffff;
  --palette-die-pip-light: #ffffff;
  --palette-text-on-board: #e4eaf0;
  --palette-text-muted: #98a4b4;
  --palette-point-number: #788898;
  --palette-legal-move: #6aa8d4;
  --palette-movable-hint: #8898a8;
  --palette-tray-bg: #121820;
  --palette-tray-bg-hover: #1a2230;
  --palette-tray-text: #e8ecf0;
  --palette-tray-red-top: #5a4840;
  --palette-tray-red-bottom: #3a3028;
  --palette-tray-wood-top: #1a2030;
  --palette-tray-wood-mid: #101820;
  --palette-tray-wood-bottom: #080c14;
  --ui-body-bg: #3a4558;
}

body.app-theme--forest,
html.app-theme--forest {
  --palette-wood-dark: #1e3020;
  --palette-board-surface: #d0dcc0;
  --palette-board-surface-deep: #bcc8ac;
  --palette-point-light: #a8b898;
  --palette-point-medium: #2a4028;
  --palette-panel: #243820;
  --palette-panel-deep: #1a2818;
  --palette-panel-alt: #121c10;
  --palette-panel-elevated: #304830;
  --palette-shell: #0e140c;
  --palette-scrim: #060804;
  --palette-player-red: #5a4030;
  --palette-player-red-hover: #6a4a38;
  --palette-player-red-soft: #7a5840;
  --palette-player-black: #141414;
  --palette-player-black-green: #6a8868;
  --palette-accent: #c8d8a0;
  --palette-accent-light: #dce8c0;
  --palette-accent-bright: #ecf0d8;
  --palette-accent-amber: #b89838;
  --palette-die-amber: #c09030;
  --palette-die-amber-light: #d8a848;
  --palette-die-amber-deep: #987020;
  --palette-die-face: #c89838;
  --palette-text-on-board: #1a2818;
  --palette-text-muted: #5a6850;
  --palette-point-number: #687860;
  --palette-legal-move: #b89838;
  --palette-movable-hint: #889870;
  --palette-tray-bg: #243820;
  --palette-tray-bg-hover: #304830;
  --palette-tray-text: #eef0e8;
  --palette-tray-red-top: #6a4a38;
  --palette-tray-red-bottom: #3a2818;
  --palette-tray-wood-top: #1a2818;
  --palette-tray-wood-mid: #101810;
  --palette-tray-wood-bottom: #080c08;
  --ui-body-bg: #7a9470;
}

body.app-theme--ocean,
html.app-theme--ocean {
  --palette-wood-dark: #1a3050;
  --palette-board-surface: #d8e4f0;
  --palette-board-surface-deep: #c4d4e4;
  --palette-point-light: #b8cce0;
  --palette-point-medium: #2a5080;
  --palette-panel: #1a2840;
  --palette-panel-deep: #121c30;
  --palette-panel-alt: #0c1424;
  --palette-panel-elevated: #243858;
  --palette-shell: #081018;
  --palette-scrim: #040810;
  --palette-player-red: #4a5868;
  --palette-player-red-hover: #5a6878;
  --palette-player-red-soft: #6a7888;
  --palette-player-black: #101820;
  --palette-player-black-green: #6888a8;
  --palette-accent: #90c8e8;
  --palette-accent-light: #b8dcf0;
  --palette-accent-bright: #d0ecf8;
  --palette-accent-amber: #d4a848;
  --palette-die-amber: #c09838;
  --palette-die-amber-light: #d8b050;
  --palette-die-amber-deep: #987028;
  --palette-die-face: #c8a040;
  --palette-text-on-board: #1a2840;
  --palette-text-muted: #5a6880;
  --palette-point-number: #6888a8;
  --palette-legal-move: #48a8d8;
  --palette-movable-hint: #7898b8;
  --palette-tray-bg: #1a2840;
  --palette-tray-bg-hover: #243858;
  --palette-tray-text: #e8f0f8;
  --palette-tray-red-top: #5a6878;
  --palette-tray-red-bottom: #3a4858;
  --palette-tray-wood-top: #1a2840;
  --palette-tray-wood-mid: #121c30;
  --palette-tray-wood-bottom: #0a1018;
  --ui-body-bg: #7898b8;
}

/* Podglądy w popupie ustawień */
.app-theme-preview {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 28px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 18%, transparent);
}

.app-theme-preview__stripe {
  flex: 1 1 0;
}

.app-theme-preview--classic .app-theme-preview__stripe:nth-child(1) { background: #2a1e16; }
.app-theme-preview--classic .app-theme-preview__stripe:nth-child(2) { background: #f0e6d6; }
.app-theme-preview--classic .app-theme-preview__stripe:nth-child(3) { background: #352619; }

.app-theme-preview--marble .app-theme-preview__stripe:nth-child(1) { background: #1a4835; }
.app-theme-preview--marble .app-theme-preview__stripe:nth-child(2) { background: #faf7f2; }
.app-theme-preview--marble .app-theme-preview__stripe:nth-child(3) { background: #1f4032; }

.app-theme-preview--midnight .app-theme-preview__stripe:nth-child(1) { background: #1a2230; }
.app-theme-preview--midnight .app-theme-preview__stripe:nth-child(2) { background: #2e3848; }
.app-theme-preview--midnight .app-theme-preview__stripe:nth-child(3) { background: #121820; }

.app-theme-preview--forest .app-theme-preview__stripe:nth-child(1) { background: #1e3020; }
.app-theme-preview--forest .app-theme-preview__stripe:nth-child(2) { background: #d0dcc0; }
.app-theme-preview--forest .app-theme-preview__stripe:nth-child(3) { background: #243820; }

.app-theme-preview--ocean .app-theme-preview__stripe:nth-child(1) { background: #1a3050; }
.app-theme-preview--ocean .app-theme-preview__stripe:nth-child(2) { background: #d8e4f0; }
.app-theme-preview--ocean .app-theme-preview__stripe:nth-child(3) { background: #1a2840; }