/* Colour themes of the Пульт. Every colour of the UI and of the warehouse map is a token here;
   app.css and warehouse-map.css only read them. The theme list (names, order) is in themes.js.

   Each theme block sets the same base tokens in the same order:
     surfaces  --bg … --faint
     signals   --accent, --test (TEST env), --prod (PROD env and errors), --ok, --warn, --down, --info
     trackers  --client (support), --dev (qtracker)
     heat      --heat-low → --heat-mid → --heat-high (map fill 0 → 100 %)
     map       --wm-*
   Soft tints and priorities are derived once at the bottom, so a new theme only lists base colours.

   The «синьо-жовті» themes and «Висококонтрастна» never pair red with green: good / bad and TEST / PROD
   differ by blue against orange-yellow and by lightness, which holds for protan, deutan and tritan vision. */

/* ---------- Темна (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e0d;
  --bg-grid: rgba(255, 255, 255, 0.025);
  --surface: #141715;
  --surface-2: #1a1e1b;
  --surface-3: #222723;
  --line: #262b27;
  --line-strong: #353b36;
  --text: #e9ece6;
  --muted: #8b938c;
  --faint: #5d655e;

  --accent: #ffb000;
  --accent-ink: #1a1300;
  --test: #2dd4bf;
  --prod: #ff4d3d;
  --prod-ink: #ffffff;
  --ok: #7bd88f;
  --warn: #ffb000;
  --down: #6b736c;
  --info: #8ab4ff;
  --client: #c9a2ff;
  --dev: #6cc6ff;

  --heat-low: #2bb673;
  --heat-mid: #f2c230;
  --heat-high: #ff4d3d;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.8);

  --wm-floor: #171a18;
  --wm-floor-line: rgba(255, 255, 255, 0.045);
  --wm-wall: #3a413b;
  --wm-zone: rgba(255, 255, 255, 0.035);
  --wm-zone-line: rgba(255, 255, 255, 0.09);
  --wm-rack: #3c69ad;
  --wm-rack-side: #23406b;
  --wm-beam: #ff7a2f;
  --wm-steel: #8c9590;
  --wm-steel-side: #4c534e;
  --wm-box: #ff6420;
  --wm-box-side: #a8380b;
  --wm-conv: #6f7873;
  --wm-roller: #a7b0ab;
  --wm-mono: #1fc28f;
  --wm-robot: #3f74e0;
  --wm-robot-side: #1f3f88;
  --wm-fence: #f2c230;
  --wm-dock: #2a2f2b;
  --wm-door: #50574f;
  --wm-truck: #5d6b7a;
  --wm-truck-rib: rgba(0, 0, 0, 0.28);
  --wm-truck-cab: #c8492f;
  --wm-rooms: rgba(255, 255, 255, 0.05);
  --wm-oversize: rgba(31, 194, 143, 0.12);
  --wm-lamp: #36e27b;
  --wm-lamp-off: #3b423d;
  --wm-label: #c9d0ca;
  --wm-label-dim: #7d867f;
  --wm-flow: #ffd27a;
}

/* ---------- Світла ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f1eee6;
  --bg-grid: rgba(26, 28, 26, 0.04);
  --surface: #fbfaf6;
  --surface-2: #f4f1e9;
  --surface-3: #ebe7dc;
  --line: #e0dbcf;
  --line-strong: #cfc8b8;
  --text: #191b19;
  --muted: #5f655f;
  --faint: #8d918a;

  --accent: #c47a00;
  --accent-ink: #fffaf0;
  --test: #0f8f80;
  --prod: #d0362a;
  --prod-ink: #ffffff;
  --ok: #2f8f4a;
  --warn: #c47a00;
  --down: #9aa09a;
  --info: #3d6fd6;
  --client: #7a3fd0;
  --dev: #0f6db3;

  --heat-low: #2bb673;
  --heat-mid: #f2c230;
  --heat-high: #ff4d3d;
  --shadow: 0 1px 2px rgba(40, 36, 20, 0.06), 0 10px 24px -20px rgba(40, 36, 20, 0.5);

  --wm-floor: #e9e6dd;
  --wm-floor-line: rgba(0, 0, 0, 0.05);
  --wm-wall: #b8b2a3;
  --wm-zone: rgba(0, 0, 0, 0.03);
  --wm-zone-line: rgba(0, 0, 0, 0.1);
  --wm-rack: #4f7fc6;
  --wm-rack-side: #2f568f;
  --wm-beam: #ff7a2f;
  --wm-steel: #a9b0ab;
  --wm-steel-side: #7c847f;
  --wm-box: #ff6420;
  --wm-box-side: #a8380b;
  --wm-conv: #9aa29d;
  --wm-roller: #c7cdc9;
  --wm-mono: #1fc28f;
  --wm-robot: #3f74e0;
  --wm-robot-side: #1f3f88;
  --wm-fence: #f2c230;
  --wm-dock: #d6d1c4;
  --wm-door: #a59f90;
  --wm-truck: #8796a6;
  --wm-truck-rib: rgba(0, 0, 0, 0.2);
  --wm-truck-cab: #d0573c;
  --wm-rooms: rgba(0, 0, 0, 0.06);
  --wm-oversize: rgba(15, 140, 100, 0.12);
  --wm-lamp: #36e27b;
  --wm-lamp-off: #bdbab0;
  --wm-label: #2a2d2a;
  --wm-label-dim: #7b8079;
  --wm-flow: #c47a00;
}

/* ---------- Темна синьо-жовта (кольорова сліпота) ----------
   Good = blue, bad = orange, attention = yellow; client vs dev differ by lightness. */
[data-theme="dark-cvd"] {
  color-scheme: dark;
  --bg: #0d0e11;
  --bg-grid: rgba(255, 255, 255, 0.025);
  --surface: #15171b;
  --surface-2: #1b1e23;
  --surface-3: #23272d;
  --line: #2a2e35;
  --line-strong: #3b414a;
  --text: #eceef2;
  --muted: #9aa1ad;
  --faint: #6a717c;

  --accent: #f5c400;
  --accent-ink: #1a1500;
  --test: #7fd8f5;
  --prod: #ff7a1a;
  --prod-ink: #1a0b00;
  --ok: #4da3ff;
  --warn: #f5c400;
  --down: #6f7681;
  --info: #b6bfcc;
  --client: #f0b3ff;
  --dev: #4d8fe8;

  --heat-low: #3b7be0;
  --heat-mid: #e6e0cf;
  --heat-high: #ff7a1a;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.8);

  --wm-floor: #17191d;
  --wm-floor-line: rgba(255, 255, 255, 0.045);
  --wm-wall: #3d424a;
  --wm-zone: rgba(255, 255, 255, 0.035);
  --wm-zone-line: rgba(255, 255, 255, 0.09);
  --wm-rack: #3c69ad;
  --wm-rack-side: #23406b;
  --wm-beam: #e69f00;
  --wm-steel: #8e949c;
  --wm-steel-side: #4d525a;
  --wm-box: #e69f00;
  --wm-box-side: #8a5f00;
  --wm-conv: #707680;
  --wm-roller: #a9afb8;
  --wm-mono: #56b4e9;
  --wm-robot: #5b8cff;
  --wm-robot-side: #2b4d99;
  --wm-fence: #f0e442;
  --wm-dock: #2b2f35;
  --wm-door: #525862;
  --wm-truck: #5d6b7a;
  --wm-truck-rib: rgba(0, 0, 0, 0.28);
  --wm-truck-cab: #b06a2a;
  --wm-rooms: rgba(255, 255, 255, 0.05);
  --wm-oversize: rgba(86, 180, 233, 0.12);
  --wm-lamp: #f0e442;
  --wm-lamp-off: #3c4048;
  --wm-label: #cdd2d9;
  --wm-label-dim: #808792;
  --wm-flow: #f0e442;
}

/* ---------- Світла синьо-жовта (кольорова сліпота) ---------- */
[data-theme="light-cvd"] {
  color-scheme: light;
  --bg: #f0f1f4;
  --bg-grid: rgba(20, 24, 32, 0.04);
  --surface: #fbfbfd;
  --surface-2: #f3f4f7;
  --surface-3: #e8eaef;
  --line: #dcdfe6;
  --line-strong: #c6cad3;
  --text: #15181d;
  --muted: #555c68;
  --faint: #868c96;

  --accent: #9a6a00;
  --accent-ink: #ffffff;
  --test: #00749e;
  --prod: #c24a00;
  --prod-ink: #ffffff;
  --ok: #0060c0;
  --warn: #9a6a00;
  --down: #9a9fa8;
  --info: #4f5866;
  --client: #a0329a;
  --dev: #003f88;

  --heat-low: #2f6fd0;
  --heat-mid: #d8d2c0;
  --heat-high: #e06a00;
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.06), 0 10px 24px -20px rgba(20, 24, 40, 0.5);

  --wm-floor: #e6e8ec;
  --wm-floor-line: rgba(0, 0, 0, 0.05);
  --wm-wall: #b3b8c1;
  --wm-zone: rgba(0, 0, 0, 0.03);
  --wm-zone-line: rgba(0, 0, 0, 0.1);
  --wm-rack: #4f7fc6;
  --wm-rack-side: #2f568f;
  --wm-beam: #e69f00;
  --wm-steel: #a8adb5;
  --wm-steel-side: #7b818a;
  --wm-box: #e69f00;
  --wm-box-side: #9a6a00;
  --wm-conv: #9aa0a8;
  --wm-roller: #c6cbd2;
  --wm-mono: #0072b2;
  --wm-robot: #3f6fe0;
  --wm-robot-side: #1f3f88;
  --wm-fence: #d4b800;
  --wm-dock: #d3d6dc;
  --wm-door: #9fa4ad;
  --wm-truck: #8796a6;
  --wm-truck-rib: rgba(0, 0, 0, 0.2);
  --wm-truck-cab: #b06a2a;
  --wm-rooms: rgba(0, 0, 0, 0.06);
  --wm-oversize: rgba(0, 114, 178, 0.1);
  --wm-lamp: #0072b2;
  --wm-lamp-off: #c3c6cc;
  --wm-label: #23272d;
  --wm-label-dim: #737a85;
  --wm-flow: #9a6a00;
}

/* ---------- Висококонтрастна ----------
   Black base, white text, strong borders; signals are the blue / orange / yellow set above. */
[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-grid: rgba(255, 255, 255, 0.04);
  --surface: #0a0a0a;
  --surface-2: #151515;
  --surface-3: #232323;
  --line: #5a5a5a;
  --line-strong: #9a9a9a;
  --text: #ffffff;
  --muted: #dadada;
  --faint: #b0b0b0;

  --accent: #ffd400;
  --accent-ink: #000000;
  --test: #8ae6ff;
  --prod: #ff8a3d;
  --prod-ink: #000000;
  --ok: #6cb8ff;
  --warn: #ffd400;
  --down: #a0a0a0;
  --info: #e6e6e6;
  --client: #f6b8ff;
  --dev: #5d9cff;

  --heat-low: #4d8fff;
  --heat-mid: #f2f2f2;
  --heat-high: #ff8a3d;
  --shadow: none;

  --wm-floor: #050505;
  --wm-floor-line: rgba(255, 255, 255, 0.08);
  --wm-wall: #8a8a8a;
  --wm-zone: rgba(255, 255, 255, 0.05);
  --wm-zone-line: rgba(255, 255, 255, 0.3);
  --wm-rack: #4d7fd0;
  --wm-rack-side: #2a4f8f;
  --wm-beam: #ffb000;
  --wm-steel: #b0b0b0;
  --wm-steel-side: #6a6a6a;
  --wm-box: #ffb000;
  --wm-box-side: #9a6a00;
  --wm-conv: #8a8a8a;
  --wm-roller: #d0d0d0;
  --wm-mono: #6cb8ff;
  --wm-robot: #6c9cff;
  --wm-robot-side: #2b4d99;
  --wm-fence: #ffd400;
  --wm-dock: #1e1e1e;
  --wm-door: #707070;
  --wm-truck: #7a8a9a;
  --wm-truck-rib: rgba(0, 0, 0, 0.4);
  --wm-truck-cab: #ff8a3d;
  --wm-rooms: rgba(255, 255, 255, 0.07);
  --wm-oversize: rgba(108, 184, 255, 0.15);
  --wm-lamp: #ffd400;
  --wm-lamp-off: #3a3a3a;
  --wm-label: #ffffff;
  --wm-label-dim: #c0c0c0;
  --wm-flow: #ffd400;
}

/* ---------- derived from the base tokens, for every theme ---------- */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --test-soft: color-mix(in srgb, var(--test) 12%, transparent);
  --prod-soft: color-mix(in srgb, var(--prod) 12%, transparent);
  --client-soft: color-mix(in srgb, var(--client) 13%, transparent);
  --dev-soft: color-mix(in srgb, var(--dev) 12%, transparent);
  --prio-a: var(--prod);
  --prio-b: var(--warn);
  --prio-c: var(--info);
  --prio-d: var(--down);
  --wm-alert: var(--prod);
}