/* Темы сайта: «Светлая» (по умолчанию, в skins.css), «Тёмная» и «Тёмная FPV».
   Тема задаётся атрибутом html[data-theme="light|dark|fpv"] (см. theme.js). Подключать ПОСЛЕ skins.css и app.css.
   Селектор html[...] body[data-skin] нужен, потому что переменные «Верстак» заданы на самом body. */

/* ---------- Тёмная (тёплая) ---------- */
html[data-theme="dark"],
html[data-theme="dark"] body[data-skin="verstak"]{
  color-scheme:dark;
  --bg:#16140f;--paper:#1f1c17;--ink:#efe9df;--muted:#a59b8c;--line:#38322a;
  --accent:#e2754f;--accent-ink:#e2754f;--accent2:#a5b784;--soft:#3b2519;--good:#4fc283;
  --on-accent:#1f1c17;--bad:#f09a8c;--bad-bg:#a3261a;--on-bad:#fff;
  --sh:0 10px 30px -18px rgba(0,0,0,.8);
}

/* ---------- Тёмная FPV (значения из DESIGN.md / tokens.css) ---------- */
html[data-theme="fpv"],
html[data-theme="fpv"] body[data-skin="verstak"]{
  color-scheme:dark;
  --base:#1E3A5F;--bg:#0E1A2B;--surface:#14263E;--surface2:#182E4C;--line:#344E6F;--line-strong:#566B87;
  --text:#E9EEF0;--muted:#9AA6B7;--heading:#8FA688;
  --btn:#85A79C;--btn-hover:#9BB8AE;--on-btn:#062B20;
  --ok:#0B4F3A;--ok-text:#91B0A6;--amber:#92620A;--amber-text:#CEB891;--wine:#7A1F2B;--wine-text:#D7BCBF;--plum:#4A1942;--plum-text:#CCBFCA;
  --r-btn:11px;--r-field:11px;--r-card:18px;--r-thumb:12px;--r-pill:999px;
  /* соответствие именам сайта */
  --paper:var(--surface);--ink:var(--text);--accent:var(--btn);--accent-ink:var(--btn);--accent2:var(--heading);--soft:var(--surface2);--good:var(--ok-text);
  --on-accent:var(--on-btn);--bad:var(--wine-text);--bad-bg:var(--wine);--on-bad:var(--wine-text);
  --r:18px;--rs:11px;--bw:1px;--sh:none;
  --fb:'Segoe UI',Inter,Arial,sans-serif;--fh:'Segoe UI',Inter,Arial,sans-serif;--fm:'JetBrains Mono','Cascadia Mono',Consolas,monospace;
}
/* компоненты в FPV: одна главная кнопка --btn, остальные --surface2 с рамкой --line, поля --surface2 */
html[data-theme="fpv"] .btn{border-radius:var(--r-btn);border-width:1.5px}
html[data-theme="fpv"] .btn:not(.primary):not([aria-pressed="true"]){background:var(--surface2);border-color:var(--line);color:var(--text)}
html[data-theme="fpv"] .btn:not(.primary):not([aria-pressed="true"]):hover{border-color:var(--line-strong)}
html[data-theme="fpv"] .btn.primary,html[data-theme="fpv"] .btn[aria-pressed="true"]{background:var(--btn);border-color:transparent;color:var(--on-btn)}
html[data-theme="fpv"] .btn.primary:hover,html[data-theme="fpv"] .btn[aria-pressed="true"]:hover{background:var(--btn-hover)}
html[data-theme="fpv"] input.f,html[data-theme="fpv"] select.f,html[data-theme="fpv"] textarea.f{background:var(--surface2);border-width:1.5px;border-color:var(--line);border-radius:var(--r-field)}
html[data-theme="fpv"] .sh,html[data-theme="fpv"] .mod .sh{color:var(--heading)}
html[data-theme="fpv"] .ava{background:var(--base);border-color:var(--line)}

/* ---------- переключатель тем ---------- */
.tsw{position:relative;display:inline-block}
.tsw>button{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:var(--bw,1.5px) solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;font:600 13px/1 var(--fb,system-ui,sans-serif);cursor:pointer}
.tsw>button:hover{border-color:var(--muted)}
.tsw-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:190px;padding:6px;background:var(--paper);border:var(--bw,1.5px) solid var(--line);border-radius:var(--rs,12px);box-shadow:var(--sh,0 10px 30px -18px rgba(0,0,0,.4))}
.tsw-menu[hidden]{display:none}
.tsw-menu button{display:flex;width:100%;align-items:center;gap:10px;text-align:left;padding:9px 10px;border:0;background:none;color:var(--ink);border-radius:8px;font:500 14px var(--fb,system-ui,sans-serif);cursor:pointer}
.tsw-menu button:hover{background:var(--bg)}
.tsw-menu button[aria-checked="true"]{font-weight:700}
.tsw-menu button .sw{width:22px;height:16px;border-radius:5px;border:1px solid var(--line);flex:none}
.tsw-menu button .ck{margin-left:auto;opacity:0}
.tsw-menu button[aria-checked="true"] .ck{opacity:1}
@media (max-width:560px){.tsw>button .lbl{display:none}}

/* страница мастера со своей палитрой: токены темы FPV следуют ей */
.themed{--btn:var(--accent);--btn-hover:var(--accent);--on-btn:var(--on-accent);--surface:var(--paper);--surface2:var(--soft);--text:var(--ink);--heading:var(--ink);--base:var(--soft)}