/* ==========================================================================
   themes.css — палитры тем ИАС ВУС
   Подключается после arhive/css/01-variables.css и переопределяет переменные
   по атрибуту html[data-theme="..."]. Старый флаг html.dark сохраняется
   в качестве алиаса на data-theme="dark" для совместимости.
   ========================================================================== */

/* ──────────────────────────── СВЕТЛЫЕ ТЕМЫ ──────────────────────────── */

/* Светлое — дефолт, уже в 01-variables.css. Дублируем явно, чтобы
   переключение на "light" всегда давало одинаковый результат. */
html[data-theme="light"]{
  --bg-page:#f3f4f6;
  --bg-card:#ffffff;
  --bg-surface:#f9fafb;
  --bg-sidebar:#0f172a;
  --text-main:#111827;
  --text-muted:#6b7280;
  --text-on-dark:#e5e7eb;
  --border:rgba(17,24,39,.12);
  --accent:#0f766e;
  --accent-soft:#14b8a6;
  --chip-bg:#e5e7eb;
  --chip-bg-active:#0f766e;
  --shadow-card:0 10px 25px rgba(15,23,42,.12);
  --btnN-bg:#eef2f6; --btnN-bg-hover:#e3e9f0; --btnN-text:#0f766e; --btnN-border:rgba(15,118,110,.28);
  --btnP-bg:#ecfdf5; --btnP-bg-hover:#d1fae5; --btnP-text:#065f46; --btnP-border:rgba(16,185,129,.35);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(2,6,23,.06);
  --btn-shadow-hover:0 2px 10px rgba(2,6,23,.10);
}

/* Indigo — холодный светлый, с акцентом индиго */
html[data-theme="indigo"]{
  --bg-page:#eef0fb;
  --bg-card:#ffffff;
  --bg-surface:#f5f6fc;
  --bg-sidebar:#1e1b4b;
  --text-main:#1e1b4b;
  --text-muted:#626088;
  --text-on-dark:#e0e7ff;
  --border:rgba(30,27,75,.14);
  --accent:#4f46e5;
  --accent-soft:#6366f1;
  --chip-bg:#dde0f5;
  --chip-bg-active:#4f46e5;
  --shadow-card:0 10px 25px rgba(30,27,75,.14);
  --btnN-bg:#eef0fb; --btnN-bg-hover:#e0e3f5; --btnN-text:#4f46e5; --btnN-border:rgba(79,70,229,.28);
  --btnP-bg:#e0e7ff; --btnP-bg-hover:#c7d2fe; --btnP-text:#3730a3; --btnP-border:rgba(99,102,241,.35);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(30,27,75,.08);
  --btn-shadow-hover:0 2px 10px rgba(30,27,75,.14);
}

/* Солнечный свет — тёплый кремовый фон, жёлто-оранжевый акцент */
html[data-theme="sunlight"]{
  --bg-page:#fff8ec;
  --bg-card:#fffdf5;
  --bg-surface:#fdf4dd;
  --bg-sidebar:#3d2b14;
  --text-main:#3d2b14;
  --text-muted:#8a6b3e;
  --text-on-dark:#fef3c7;
  --border:rgba(61,43,20,.15);
  --accent:#d97706;
  --accent-soft:#f59e0b;
  --chip-bg:#fde7bd;
  --chip-bg-active:#d97706;
  --shadow-card:0 10px 25px rgba(217,119,6,.12);
  --btnN-bg:#fff0d0; --btnN-bg-hover:#fde3a8; --btnN-text:#b45309; --btnN-border:rgba(217,119,6,.3);
  --btnP-bg:#fef3c7; --btnP-bg-hover:#fde68a; --btnP-text:#854d0e; --btnP-border:rgba(245,158,11,.4);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(180,83,9,.1);
  --btn-shadow-hover:0 2px 10px rgba(180,83,9,.16);
}

/* Океан — светлая голубая палитра */
html[data-theme="ocean"]{
  --bg-page:#e6f2fa;
  --bg-card:#ffffff;
  --bg-surface:#f0f7fc;
  --bg-sidebar:#0c2d48;
  --text-main:#0c2d48;
  --text-muted:#4e6d86;
  --text-on-dark:#dbeafe;
  --border:rgba(12,45,72,.14);
  --accent:#0284c7;
  --accent-soft:#0ea5e9;
  --chip-bg:#cfe4f3;
  --chip-bg-active:#0284c7;
  --shadow-card:0 10px 25px rgba(12,45,72,.12);
  --btnN-bg:#e0eff9; --btnN-bg-hover:#cfe4f3; --btnN-text:#0369a1; --btnN-border:rgba(2,132,199,.3);
  --btnP-bg:#dbeafe; --btnP-bg-hover:#bfdbfe; --btnP-text:#075985; --btnP-border:rgba(14,165,233,.4);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(3,105,161,.1);
  --btn-shadow-hover:0 2px 10px rgba(3,105,161,.14);
}

/* Леса — зелёная спокойная палитра */
html[data-theme="forest"]{
  --bg-page:#ecf3ea;
  --bg-card:#ffffff;
  --bg-surface:#f3f7f1;
  --bg-sidebar:#1a2e1a;
  --text-main:#1a2e1a;
  --text-muted:#5a6f58;
  --text-on-dark:#dcfce7;
  --border:rgba(26,46,26,.14);
  --accent:#16a34a;
  --accent-soft:#22c55e;
  --chip-bg:#d3e5cf;
  --chip-bg-active:#16a34a;
  --shadow-card:0 10px 25px rgba(26,46,26,.12);
  --btnN-bg:#e1edde; --btnN-bg-hover:#d1e2cd; --btnN-text:#166534; --btnN-border:rgba(22,163,74,.3);
  --btnP-bg:#dcfce7; --btnP-bg-hover:#bbf7d0; --btnP-text:#14532d; --btnP-border:rgba(34,197,94,.4);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(20,83,45,.1);
  --btn-shadow-hover:0 2px 10px rgba(20,83,45,.14);
}

/* Роза — тёплая розово-коралловая */
html[data-theme="rose"]{
  --bg-page:#fdf2f5;
  --bg-card:#ffffff;
  --bg-surface:#fef6f8;
  --bg-sidebar:#4c1229;
  --text-main:#4c1229;
  --text-muted:#875266;
  --text-on-dark:#fce7ef;
  --border:rgba(76,18,41,.14);
  --accent:#e11d48;
  --accent-soft:#f43f5e;
  --chip-bg:#fbd4df;
  --chip-bg-active:#e11d48;
  --shadow-card:0 10px 25px rgba(76,18,41,.12);
  --btnN-bg:#fde2ea; --btnN-bg-hover:#fbcfda; --btnN-text:#be123c; --btnN-border:rgba(225,29,72,.28);
  --btnP-bg:#fce7ef; --btnP-bg-hover:#fbcfda; --btnP-text:#881337; --btnP-border:rgba(244,63,94,.35);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(136,19,55,.1);
  --btn-shadow-hover:0 2px 10px rgba(136,19,55,.14);
}

/* Lavender — мягкий сиреневый */
html[data-theme="lavender"]{
  --bg-page:#f4eff9;
  --bg-card:#ffffff;
  --bg-surface:#f8f3fc;
  --bg-sidebar:#3b1f5c;
  --text-main:#3b1f5c;
  --text-muted:#755a8a;
  --text-on-dark:#ede9fe;
  --border:rgba(59,31,92,.14);
  --accent:#9333ea;
  --accent-soft:#a855f7;
  --chip-bg:#e5d7f4;
  --chip-bg-active:#9333ea;
  --shadow-card:0 10px 25px rgba(59,31,92,.12);
  --btnN-bg:#ece1f6; --btnN-bg-hover:#dccfee; --btnN-text:#7e22ce; --btnN-border:rgba(147,51,234,.28);
  --btnP-bg:#ede9fe; --btnP-bg-hover:#ddd6fe; --btnP-text:#5b21b6; --btnP-border:rgba(168,85,247,.35);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(91,33,182,.1);
  --btn-shadow-hover:0 2px 10px rgba(91,33,182,.14);
}

/* Монохромный — чистый серый без цветного акцента */
html[data-theme="mono"]{
  --bg-page:#eeeeee;
  --bg-card:#ffffff;
  --bg-surface:#f5f5f5;
  --bg-sidebar:#171717;
  --text-main:#171717;
  --text-muted:#6b6b6b;
  --text-on-dark:#e5e5e5;
  --border:rgba(0,0,0,.14);
  --accent:#404040;
  --accent-soft:#737373;
  --chip-bg:#dedede;
  --chip-bg-active:#404040;
  --shadow-card:0 10px 25px rgba(0,0,0,.12);
  --btnN-bg:#eaeaea; --btnN-bg-hover:#dcdcdc; --btnN-text:#262626; --btnN-border:rgba(0,0,0,.22);
  --btnP-bg:#f0f0f0; --btnP-bg-hover:#dcdcdc; --btnP-text:#171717; --btnP-border:rgba(0,0,0,.28);
  --btn-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.08);
  --btn-shadow-hover:0 2px 10px rgba(0,0,0,.12);
}

/* ──────────────────────────── ТЁМНЫЕ ТЕМЫ ──────────────────────────── */

/* Общие переопределения для всех тёмных тем — базовый контраст
   оставляем специфичным каждой теме; тут только shadow-уровень. */

/* Тёмное (дефолтная тёмная, палитра Claude — из 01-variables.css) */
html[data-theme="dark"],
html.dark{
  --bg-page:#1a1a1a;
  --bg-card:#2c2c2a;
  --bg-surface:#242422;
  --bg-sidebar:#1a1a1a;
  --text-main:#e8e6df;
  --text-muted:#9c9a92;
  --text-on-dark:#d3d1c7;
  --border:rgba(232,230,223,.15);
  --accent:#0d9488;
  --accent-soft:#2dd4bf;
  --chip-bg:#3d3d3a;
  --chip-bg-active:#0d9488;
  --shadow-card:0 10px 25px rgba(0,0,0,.35);
  --btnN-bg:rgba(45,212,191,.10); --btnN-bg-hover:rgba(45,212,191,.16); --btnN-text:#93e6d8; --btnN-border:rgba(45,212,191,.35);
  --btnP-bg:rgba(13,148,136,.14); --btnP-bg-hover:rgba(13,148,136,.22); --btnP-text:#5eead4; --btnP-border:rgba(13,148,136,.4);
  --btn-shadow:0 1px 0 rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.30);
  --btn-shadow-hover:0 4px 16px rgba(0,0,0,.45);
}

/* Спуста (After Midnight) — глубокая чёрно-синяя с фиолетовым акцентом */
html[data-theme="after-midnight"]{
  --bg-page:#0d0d1a;
  --bg-card:#191929;
  --bg-surface:#121220;
  --bg-sidebar:#0d0d1a;
  --text-main:#d7d5e8;
  --text-muted:#858299;
  --text-on-dark:#c4c2d6;
  --border:rgba(215,213,232,.13);
  --accent:#7c3aed;
  --accent-soft:#a78bfa;
  --chip-bg:#26263a;
  --chip-bg-active:#7c3aed;
  --shadow-card:0 10px 25px rgba(0,0,0,.55);
  --btnN-bg:rgba(167,139,250,.12); --btnN-bg-hover:rgba(167,139,250,.2); --btnN-text:#c4b5fd; --btnN-border:rgba(167,139,250,.35);
  --btnP-bg:rgba(124,58,237,.18); --btnP-bg-hover:rgba(124,58,237,.28); --btnP-text:#ddd6fe; --btnP-border:rgba(124,58,237,.45);
  --btn-shadow:0 1px 0 rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.45);
  --btn-shadow-hover:0 4px 16px rgba(0,0,0,.6);
}

/* Лунный свет — тёмно-синий с серебристо-голубым акцентом */
html[data-theme="moonlight"]{
  --bg-page:#171b2a;
  --bg-card:#252a40;
  --bg-surface:#1d2234;
  --bg-sidebar:#171b2a;
  --text-main:#dbe0f0;
  --text-muted:#8a91ad;
  --text-on-dark:#c7cee2;
  --border:rgba(219,224,240,.13);
  --accent:#60a5fa;
  --accent-soft:#93c5fd;
  --chip-bg:#2f3651;
  --chip-bg-active:#60a5fa;
  --shadow-card:0 10px 25px rgba(0,0,0,.5);
  --btnN-bg:rgba(147,197,253,.1); --btnN-bg-hover:rgba(147,197,253,.18); --btnN-text:#bfdbfe; --btnN-border:rgba(96,165,250,.35);
  --btnP-bg:rgba(96,165,250,.14); --btnP-bg-hover:rgba(96,165,250,.22); --btnP-text:#dbeafe; --btnP-border:rgba(96,165,250,.4);
  --btn-shadow:0 1px 0 rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.4);
  --btn-shadow-hover:0 4px 16px rgba(0,0,0,.55);
}

/* Полночь — почти чёрная с холодным стальным акцентом */
html[data-theme="midnight"]{
  --bg-page:#0a0a0c;
  --bg-card:#18181c;
  --bg-surface:#101013;
  --bg-sidebar:#0a0a0c;
  --text-main:#e4e4e9;
  --text-muted:#8b8b94;
  --text-on-dark:#c7c7ce;
  --border:rgba(228,228,233,.12);
  --accent:#64748b;
  --accent-soft:#94a3b8;
  --chip-bg:#27272c;
  --chip-bg-active:#64748b;
  --shadow-card:0 10px 25px rgba(0,0,0,.6);
  --btnN-bg:rgba(148,163,184,.1); --btnN-bg-hover:rgba(148,163,184,.18); --btnN-text:#cbd5e1; --btnN-border:rgba(148,163,184,.3);
  --btnP-bg:rgba(100,116,139,.15); --btnP-bg-hover:rgba(100,116,139,.25); --btnP-text:#e2e8f0; --btnP-border:rgba(100,116,139,.4);
  --btn-shadow:0 1px 0 rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.5);
  --btn-shadow-hover:0 4px 16px rgba(0,0,0,.65);
}

/* Ember — тёмная тёплая с янтарно-оранжевым акцентом */
html[data-theme="ember"]{
  --bg-page:#1c1410;
  --bg-card:#2d2118;
  --bg-surface:#231914;
  --bg-sidebar:#1c1410;
  --text-main:#ece0d2;
  --text-muted:#a69684;
  --text-on-dark:#d8c7b4;
  --border:rgba(236,224,210,.14);
  --accent:#ea580c;
  --accent-soft:#fb923c;
  --chip-bg:#3d2c20;
  --chip-bg-active:#ea580c;
  --shadow-card:0 10px 25px rgba(0,0,0,.5);
  --btnN-bg:rgba(251,146,60,.12); --btnN-bg-hover:rgba(251,146,60,.2); --btnN-text:#fdba74; --btnN-border:rgba(251,146,60,.35);
  --btnP-bg:rgba(234,88,12,.17); --btnP-bg-hover:rgba(234,88,12,.27); --btnP-text:#fed7aa; --btnP-border:rgba(234,88,12,.45);
  --btn-shadow:0 1px 0 rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.4);
  --btn-shadow-hover:0 4px 16px rgba(0,0,0,.55);
}

/* Nord — холодная приглушённая палитра Nord */
html[data-theme="nord"]{
  --bg-page:#2e3440;
  --bg-card:#3b4252;
  --bg-surface:#343a48;
  --bg-sidebar:#2e3440;
  --text-main:#eceff4;
  --text-muted:#8d96a8;
  --text-on-dark:#d8dee9;
  --border:rgba(236,239,244,.13);
  --accent:#88c0d0;
  --accent-soft:#8fbcbb;
  --chip-bg:#434c5e;
  --chip-bg-active:#88c0d0;
  --shadow-card:0 10px 25px rgba(0,0,0,.4);
  --btnN-bg:rgba(136,192,208,.12); --btnN-bg-hover:rgba(136,192,208,.22); --btnN-text:#a3d3df; --btnN-border:rgba(136,192,208,.35);
  --btnP-bg:rgba(143,188,187,.16); --btnP-bg-hover:rgba(143,188,187,.26); --btnP-text:#b7d7d6; --btnP-border:rgba(143,188,187,.42);
  --btn-shadow:0 1px 0 rgba(255,255,255,.03),0 2px 6px rgba(0,0,0,.35);
  --btn-shadow-hover:0 4px 16px rgba(0,0,0,.5);
}

/* ──────────────────────────── СОВМЕСТИМОСТЬ ──────────────────────────── */
/* Всем тёмным темам ставим html.dark, чтобы старые селекторы html.dark .foo
   продолжали работать. Это делает JS в theme-switcher.js, но добавляем
   страховку здесь для всех data-theme с которыми работал старый код. */

/* Глобальный фон body чтобы ничего не белело за краями */
body{
  background: var(--bg-page);
  color: var(--text-main);
}

/* ──────────────────────────── МЕНЮ ВЫБОРА ТЕМЫ ──────────────────────────── */

.vus-theme-menu{
  position: fixed;
  z-index: 10000;
  min-width: 220px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 10px);
  box-shadow: 0 12px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
  padding: 6px;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size: 14px;
  color: var(--text-main);
  user-select: none;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
html.dark .vus-theme-menu,
html[data-theme="dark"] .vus-theme-menu,
html[data-theme="after-midnight"] .vus-theme-menu,
html[data-theme="moonlight"] .vus-theme-menu,
html[data-theme="midnight"] .vus-theme-menu,
html[data-theme="ember"] .vus-theme-menu,
html[data-theme="nord"] .vus-theme-menu{
  box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
}
.vus-theme-menu.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vus-theme-menu__group{
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.vus-theme-menu__group:not(:first-child){
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 10px;
}
.vus-theme-menu__item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.2;
  position: relative;
  color: var(--text-main);
}
.vus-theme-menu__item:hover{
  background: var(--accent);
  color: #fff;
}
.vus-theme-menu__item.is-active{
  background: var(--chip-bg-active);
  color: #fff;
}
.vus-theme-menu__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .95;
}
.vus-theme-menu__icon svg{ width: 18px; height: 18px; }
.vus-theme-menu__label{ flex: 1; }
.vus-theme-menu__check{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
}
.vus-theme-menu__item.is-active .vus-theme-menu__check{ opacity: 1; }

/* Мобильная адаптация: меню растягивается на ширину экрана, прижато снизу */
@media (max-width: 480px){
  .vus-theme-menu{
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: 8px !important;
    min-width: 0;
    max-height: 70vh;
    overflow-y: auto;
    transform: translateY(8px);
  }
  .vus-theme-menu.is-open{ transform: translateY(0); }
  .vus-theme-menu__item{ padding: 10px 12px; }
}