/* ==========================================================================
   AVE — ТЕМЫ ОФОРМЛЕНИЯ: переключатель + светлая тема.
   Подключается ПОСЛЕДНИМ в index.html, поэтому перекрывает все слои выше.

   Тёмная тема — основная и НЕ переопределяется здесь вовсе: html[data-theme="dark"] = AVE как был.
   Светлая — та же система AVE (шрифт, логотип, оранжевый акцент, точечная сетка), только поверхности
   светлые. Цвета живут в двух слоях — :root (tokens.css, на нём style.css) и .ave-root (слой
   редизайна) — перекрываем ОБА, иначе часть интерфейса останется в тёмной гамме.

   Переключатель и механика (theme-boot.js / theme.js) — по мотивам версии друга (Ripplet Hub,
   hub-starter-2026-10-04, авторство оформляет владелец); палитра и правки ниже — AVE.
   ========================================================================== */

/* ------------------------------------------------- переключатель в шапке */
.theme-pick { position: relative; display: inline-flex; }
.theme-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; padding: 4px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); z-index: 400; display: none;
}
.theme-menu.open { display: block; }
.theme-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px;
  background: none; border: 0; border-radius: 5px; color: var(--ink);
  font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.theme-menu button:hover { background: var(--panel); }
.theme-menu button[aria-checked="true"] { color: var(--signal); font-weight: 600; }
.theme-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--line); flex: none; }
.theme-swatch.dark  { background: linear-gradient(135deg, #0d0e10 50%, #ff9d2e 50%); }
.theme-swatch.light { background: linear-gradient(135deg, #ffffff 50%, #e07a00 50%); }

/* ------------------------------------------------- переключатель в настройках */
.set-theme { display: flex; gap: 8px; margin: 2px 0 6px; }
.set-theme > button { flex: 1 1 0; justify-content: center; }
.set-theme > button.on { border-color: var(--signal); color: var(--signal); font-weight: 600; }

/* ==========================================================================
   СВЕТЛАЯ: ТОКЕНЫ
   Контраст по фону --bg: --ink 17:1, --ink-dim 10:1, --muted 5:1, --muted-2 3.7:1, --signal 3.5:1,
   --signal-hi 4.4:1. Оранжевый AVE на светлом взят на тон глубже: яркий #ff9d2e по белому — 2:1, его не
   видно. Подпись на оранжевой заливке остаётся тёмной (--on-signal, 4.9:1).
   ========================================================================== */

html[data-theme="light"] {
  color-scheme: light;
  --stage:    #e9e9ed;
  --bg:       #f6f6f8;
  --panel:    #ffffff;
  --panel-2:  #f4f4f7;
  --field:    #f1f1f4;
  --line:     #d9d9e0;
  --line-2:   #e7e7ec;
  --ink:      #131317;
  --ink-dim:  #34353c;
  --muted:    #666771;
  --muted-2:  #7d7e88;
  --signal:   #c96a00;
  --signal-d: #fde3c3;
  --ch-text:  #1b6fd1;
  --ch-voice: #e0512a;
  --ok:       #0e8f5c;
  --danger:   #d63a2f;
  --danger-l: #fbe0dd;
}

html[data-theme="light"] .ave-root,
html[data-theme="light"] body.ave-root {
  --stage:   #e9e9ed;   /* фон за всем, подложка модалок */
  --bg:      #f6f6f8;   /* основная область */
  --panel:   #ffffff;   /* сайдбар, карточки */
  --panel-2: #f4f4f7;   /* поповеры, модалки, «на шаг выше» — на светлом это шаг в серое */
  --field:   #f1f1f4;   /* поля ввода, углубления */

  --line:    #d9d9e0;
  --line-2:  #e7e7ec;

  --ink:     #131317;
  --ink-dim: #34353c;
  --muted:   #666771;
  --muted-2: #7d7e88;   /* бледные подписи, плейсхолдеры (3.7:1 — ещё читается) */

  --signal:      #c96a00;
  --signal-d:    #fde3c3;   /* бледная подложка акцента */
  --signal-soft: #d97706;
  --signal-hi:   #b75a00;   /* акцентный ТЕКСТ и активные значки на светлом */

  --ch-text:  #1b6fd1;
  --ch-voice: #e0512a;

  --ok:      #0e8f5c;
  --danger:  #d63a2f;
  --danger-l:#fbe0dd;
  --danger-2:#c4473e;
  --danger-ink: #b3261e;   /* красный текст (крит. задачи, приоритет) — у тёмной темы свой фолбэк */
  --on-danger:  #ffffff;
  --warn-ink:   #855c00;
  --placeholder:#9a9ba4;

  --yellow:  #a87c00;
  --teal:    #0e8a7b;
  --purple:  #7656e0;
  --carrot:  #d9451b;

  --on-signal: #16130c;

  --glass-panel: color-mix(in srgb, #ffffff 86%, transparent);
  --glass-hi:    rgba(0, 0, 0, 0.035);
}

/* ==========================================================================
   ЦВЕТА ПУНКТОВ НАВИГАЦИИ (сайдбар, рейл). Раньше — зашитые hex в ave-shell.js; теперь токены,
   у тёмной — те же значения, что были, у светлой — на тон глубже (пастель по белому не видна).
   ========================================================================== */
.ave-root {
  --nav-tasks: #34d399; --nav-tree: #c98af0; --nav-boards: #ff9d2e; --nav-docs: #7ec8c3;
  --nav-video: #c98af0; --nav-meet: #ff6a3d; --nav-dm: #c79bff;
}
html[data-theme="light"] .ave-root {
  --nav-tasks: #0e8f5c; --nav-tree: #8a5bd6; --nav-boards: #c96a00; --nav-docs: #237f79;
  --nav-video: #8a5bd6; --nav-meet: #c8431d; --nav-dm: #7656e0;
}

/* ==========================================================================
   СВЕТЛАЯ: ТОЧЕЧНЫЕ ПРАВКИ — места, где цвет тёмной темы зашит в разметку или в стили модулей.
   ========================================================================== */

/* Буквенный аватар: цвет пользователя выбран под тёмный фон (applyAvatar кладёт его в --uc).
   На светлом уводим его к --ink — цвет остаётся «своим», но читается; подложка — его бледный тон. */
html[data-theme="light"] [style*="--uc"]:not(.has-avatar) {
  color: color-mix(in srgb, var(--uc) 50%, var(--ink)) !important;
  background-color: color-mix(in srgb, var(--uc) 14%, var(--panel)) !important;
}

/* «⋯» на превью доски: тёмное стекло под тёмную тему */
html[data-theme="light"] .bds-menu-btn {
  background: var(--panel); color: var(--muted); border-color: var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08); backdrop-filter: none;
}
html[data-theme="light"] .bds-menu-btn:hover { color: var(--ink); border-color: var(--signal); }


/* Полосы календаря и капсулы таймлайна: на тёмном — насыщенная заливка цветом задачи и БЕЛАЯ подпись
   с тенью. На белом та же формула даёт пастель, и белая подпись пропадает (1.7:1). На светлой меняем
   роли: заливка — мягкая подложка, подпись — тёмный вариант того же цвета (приём из версии друга). */
html[data-theme="light"] .ave-root #tasks-pane .tk-bar {
  background: linear-gradient(100deg, color-mix(in srgb, var(--bc) 26%, #fff), color-mix(in srgb, var(--bc) 15%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent);
  color: color-mix(in srgb, var(--bc) 40%, var(--ink));
}
html[data-theme="light"] .ave-root #tasks-pane .tk-bar:hover {
  background: linear-gradient(100deg, color-mix(in srgb, var(--bc) 36%, #fff), color-mix(in srgb, var(--bc) 22%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 55%, transparent);
}
html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-pill {
  background: linear-gradient(100deg, color-mix(in srgb, var(--bc) 24%, #fff), color-mix(in srgb, var(--bc) 14%, #fff));
  border-color: color-mix(in srgb, var(--bc) 45%, transparent);
  box-shadow: 0 6px 16px -12px var(--bc);
  color: color-mix(in srgb, var(--bc) 40%, var(--ink));
}
html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-ttl { color: inherit; text-shadow: none; }
html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-prio {
  background: color-mix(in srgb, #fff 80%, transparent); color: var(--signal-hi);
  border-color: color-mix(in srgb, var(--bc) 40%, transparent);
}
html[data-theme="light"] .ave-root #tasks-pane .tk-tl3-av { border-color: color-mix(in srgb, #fff 70%, transparent); }

/* Выбранная тема в настройках: у .modal .btn-ghost селектор сильнее — берём id */
#set-theme > button.on,
#set-theme > button.on:hover {
  border-color: var(--signal); color: var(--signal-hi, var(--signal));
  background: color-mix(in srgb, var(--signal) 12%, transparent); font-weight: 600;
}

/* Телефон: в шапке нет места (панель чата уезжала за край) — тема переключается в настройках */
@media (max-width: 760px) {
  #theme-pick { display: none; }
}

/* Цвет роли (--rc: красный «Админ», оранжевый «Отец»…) выбран под тёмный фон; на светлой подписи плашек
   ролей уводим к --ink — цвет узнаётся, но читается (у «Админ» было 2.8:1). Подложка/рамка — прежние. */
html[data-theme="light"] .ave-root [style*="--rc"] {
  color: color-mix(in srgb, var(--rc) 62%, var(--ink)) !important;
}

/* Акцентный текст по собственной 12-процентной подложке («активная вкладка»): --signal даёт 2.9:1,
   берём тот же тон на шаг темнее. */
html[data-theme="light"] .ave-root .set-tab.on,
html[data-theme="light"] .ave-root #tasks-pane .tk-tab.tk-on,
html[data-theme="light"] .ave-root #tasks-pane .tk-typf.tk-typf-ic.tk-on,
html[data-theme="light"] .ave-root .bds-chip.on,
html[data-theme="light"] .ave-root .tk-qa-chip.tk-on,
html[data-theme="light"] .ave-root .tab.active {
  color: var(--signal-hi);
}

/* Шторка меню (телефон): матовое стекло рассчитано на тёмный экран под ним — на светлом из
   полупрозрачной панели и тёмного затемнения выходил серый лист. */
html[data-theme="light"] .as-scrim { background: rgba(20, 20, 28, .28); }
html[data-theme="light"] .as-sheet {
  background: color-mix(in srgb, var(--panel-2) 90%, transparent);
  border-top-color: var(--line);
}

/* «Нагрузка»: плашка приоритета на тёмном стекле */
html[data-theme="light"] .ave-root .tk-load3-pprio { background: color-mix(in srgb, currentColor 10%, var(--panel)); }
/* Радар нагрузки — «экран прибора»: остаётся тёмным в обеих темах (как окно разбора видео у друга),
   поэтому внутри поля возвращаем тёмные токены — иначе подписи имён становились тёмными по тёмному. */
html[data-theme="light"] .ave-root #tasks-pane .tk-load3-field {
  --ink: #f3f3f5; --ink-dim: #c3c4ca; --muted: #8a8b93; --muted-2: #5b5c65; --line: #2b2c32;
  color-scheme: dark;
}

/* Видео: «стеклянные» подложки раздела были белыми полупрозрачными — на светлом фоне их не видно */
html[data-theme="light"] .vd-back {
  --vd-g1: rgba(0, 0, 0, .035); --vd-g2: rgba(0, 0, 0, .05); --vd-g3: rgba(0, 0, 0, .08); --vd-g4: rgba(0, 0, 0, .11);
}
/* Видео: таймкоды в правках и окно «Поделиться» — светлые цвета были зашиты под тёмную панель */
/* (кнопки плеера .vd-b/.vd-tool/.vd-tcbtn стоят на тёмной панели плеера — она тёмная в обеих темах, их не трогаем) */
html[data-theme="light"] .vd-back :is(.vd-shlink, .vd-sh1) { color: var(--ink); }
html[data-theme="light"] .vd-back .vd-shchk { color: var(--ink-dim); }
html[data-theme="light"] .vd-back :is(.vd-tc, .vd-tag, .vd-at) { color: #2f56c9; }
html[data-theme="light"] .vd-back .vd-tc { background: rgba(47, 86, 201, .10); }
html[data-theme="light"] .vd-back .vd-tc:hover { background: rgba(47, 86, 201, .18); color: #1d3c9e; }

/* Поле точек запасным CSS-вариантом (без канвы): на светлой точки тёмные */
html[data-theme="light"] .ave-root.ave-field-css .app {
  background-image: radial-gradient(circle, rgba(60, 64, 82, .12) 1.1px, transparent 1.7px);
}

/* Документы: «Править» — акцентный текст на собственной подложке; на потемневшем фоне пространства --signal
   давал 2.7:1 — берём тон глубже, как у активных вкладок */
html[data-theme="light"] .dc-back .dc-btn-ico,
html[data-theme="light"] .dc-back .dc-btn-ico:hover { color: var(--signal-hi); }