/* Токены — дизайн-код VIGO. Цвета задаются В ОДНОМ МЕСТЕ и раздаются по
   приложению (решение владельца 19.09.2026, «работаем по ООП»). Три слоя:
     1. ПАЛИТРА (--pal-*) — единственное место, где живут hex-коды. Экраны её
        не трогают.
     2. РОЛИ (--accent, --ink, --surface…) — ссылаются только на палитру. CSS
        экранов пользуется ТОЛЬКО ролями.
     3. ТЕМА — тёмная переназначает роли, не трогая экраны.
   Поменял цвет в палитре — он поменялся везде, где им пользуется роль.
   Тему ставит Telegram (frontend.md 1). Канвас с вариантами —
   claude.ai/artifact/Kr2J8ZnrUAEp7Nz3mPbuv2 («Дизайн-код VIGO — цвета»). */
:root{
  /* ===== 1. ПАЛИТРА (светлая тема) ===================================== */
  /* Бренд — бирюза кнопки «Спросить» (край шапки ASIANA). С 19.09.2026 это
     ЕДИНСТВЕННЫЙ акцент приложения: раньше дальше первого экрана шёл
     зелёный #0E6E72, и экраны выглядели разными продуктами. */
  --pal-turq:#0096C7;       /* заливка; белый на ней 3,39:1 — принято владельцем */
  /* Тот же оттенок на ступень глубже — для МЕЛКОГО текста. #0096C7 на белом
     3,39:1, ниже порога 4,5. Замер: #007FAA на белом 4,55, но на тоне панели
     (--surface-2, где «Все 21 ›») 4,25; #0079A3 — 4,9 на белом, 4,6 на панели. */
  --pal-turq-deep:#0079A3;
  --pal-turq-soft:#E0F2F8;  /* подложка выбранного */
  --pal-turq-grad-a:#00D4AA; --pal-turq-grad-b:#00B4D8;  /* перелив ASIANA */
  /* Прежний акцент. В интерфейсе его больше нет — остался пятну плотности
     на карте: это данные, а не кнопка, и бирюза рядом с водой с ней спорила бы. */
  --pal-teal:#0E6E72;
  /* Нейтральные «B · Холодный» (владелец 19.09.2026): с подтоном бирюзы.
     Прежний «известняк с зелёным подтоном» подбирали под зелёный акцент. */
  --pal-white:#FFFFFF;
  --pal-cool-50:#F4F7F9; --pal-cool-100:#ECF1F3; --pal-cool-150:#E1E8EC;
  --pal-cool-200:#D3DDE2; --pal-cool-300:#BCCAD1;
  --pal-slate-500:#5B6E79; --pal-slate-700:#44596A; --pal-slate-900:#102430;
  /* Сигналы */
  --pal-red:#C2445E; --pal-green:#3FA36B; --pal-pink:#F2415A;
  /* Категории: основной / мягкий / плотный (для белого текста на заливке) */
  --pal-orange:#D97A2B; --pal-orange-soft:#FAEBDC; --pal-orange-strong:#B06120;
  --pal-brown:#B0632A;  --pal-brown-soft:#F4E7DA;  --pal-brown-strong:#965424;
  --pal-grass:#4C8C3F;  --pal-grass-soft:#E4F0DC;  --pal-grass-strong:#47823B;
  --pal-violet:#6C5BA8; --pal-violet-soft:#E9E5F4;
  --pal-steel:#3F7CA8;  --pal-steel-soft:#E1EBF3;  --pal-steel-strong:#3E7AA6;
  --pal-sky:#2E7DBE;    --pal-sky-soft:#DEEAF6;    --pal-sky-strong:#2D79B8;
  /* Земля карты — своя, не нейтральные интерфейса (подложку правят отдельно) */
  --pal-map-void:#E4E9E2; --pal-map-earth:#F5F7F2; --pal-map-urban:#ECEFE7;
  --pal-map-green:#D6E3C8; --pal-map-water:#9CC4D2; --pal-map-water-line:#84B2C3;
  --pal-map-building:#DFE4D9; --pal-map-building-line:#CBD3C4;
  --pal-map-road-case:#C2CBBA; --pal-map-road-minor:#FAFBF8; --pal-map-road-minor-case:#CBD4C2;
  --pal-map-label:#4C5D58; --pal-map-district:#12211F;
  --pal-map-muted:#7E8E88; --pal-map-boundary:#B8C3B6;

  /* ===== 2. РОЛИ — экраны пользуются только ими ======================== */
  --paper:var(--pal-cool-100); --surface:var(--pal-white);
  --surface-2:var(--pal-cool-50); --sunk:var(--pal-cool-150);
  --ink:var(--pal-slate-900); --ink-2:var(--pal-slate-700);
  /* ink-3 — «тихий» тон, но не нечитаемый: на нём держатся время в ленте,
     подсказка в поле, выключенные чипы слоёв и языки. Порог 4,5 для мелкого
     кегля — замер, не на глаз: #5B6E79 на белом 5,3, на --paper 4,7. */
  --ink-3:var(--pal-slate-500);
  --line:var(--pal-cool-200); --line-2:var(--pal-cool-300);
  /* Акцент — ДВЕ роли одного оттенка: заливка и мелкий текст. */
  --accent:var(--pal-turq); --accent-soft:var(--pal-turq-soft); --on-accent:var(--pal-white);
  --accent-ink:var(--pal-turq-deep);
  /* Кнопка действия вводного экрана — та же заливка, что у всех главных кнопок. */
  --cta-fill:var(--accent); --cta-ink:var(--on-accent);
  /* Перелив ASIANA — обводка поля вопроса (17.09.2026). Обводка — не текст:
     порог к ней 3:1 (WCAG 1.4.11); поле узнаётся и по форме, и по подсказке. */
  --accent-grad:linear-gradient(135deg,var(--pal-turq-grad-a) 0%,var(--pal-turq-grad-b) 50%,var(--pal-turq) 100%);
  --danger:var(--pal-red); --ok:var(--pal-green);
  /* Лайк-сердце барахолки. Тёплый красно-розовый, отдельно от --danger:
     лайк — не «ошибка/внимание», а симпатия. */
  --like:var(--pal-pink);
  /* Затемнение под модалками и листами */
  --scrim:rgba(16,36,48,.42);

  /* Слои карты — категориальные, не акцент. Еда — зелёная, а не красная
     (владелец 05.09.2026): красный на карте читается как «внимание/ошибка». */
  --l-rent:var(--pal-orange); --l-sale:var(--pal-brown); --l-food:var(--pal-grass);
  --l-service:var(--pal-violet); --l-poi:var(--pal-steel); --l-leisure:var(--pal-sky);
  /* Подложка под знак типа, мягкая (~15%): эмодзи цветное само, на насыщенной
     заливке оно спорит с фоном и перестаёт читаться. */
  --l-rent-soft:var(--pal-orange-soft); --l-sale-soft:var(--pal-brown-soft);
  --l-food-soft:var(--pal-grass-soft); --l-service-soft:var(--pal-violet-soft);
  --l-poi-soft:var(--pal-steel-soft); --l-leisure-soft:var(--pal-sky-soft);
  /* Заливка ВЫБРАННОЙ метки и белый текст на ней (17.09.2026): тоны слоёв
     подобраны под кольцо на белом, а под белым текстом давали 3,10…4,51.
     Затемнена только светлота. Замер белого: rent 4,59 · sale 5,85 ·
     food 4,64 · service 5,68 · poi 4,63 · leisure 4,63. Продажа нарочно на
     ступень темнее аренды — иначе сходились в один коричневый. */
  --l-rent-strong:var(--pal-orange-strong); --l-sale-strong:var(--pal-brown-strong);
  --l-food-strong:var(--pal-grass-strong); --l-service-strong:var(--pal-violet);
  --l-poi-strong:var(--pal-steel-strong); --l-leisure-strong:var(--pal-sky-strong);
  --on-layer:var(--pal-white);

  --shadow:0 1px 2px rgba(16,36,48,.06), 0 6px 20px rgba(16,36,48,.10);
  --shadow-lift:0 2px 6px rgba(16,36,48,.10), 0 16px 40px rgba(16,36,48,.18);

  /* Раскладка: база 1/3 чата, дальше её двигает пользователь. Значение
     дублирует SNAPS[0] в state.js — CSS нужен до первого кадра JS. */
  --chat-h:33%; --msg-size:13.5px;
  /* Подложка карты. Тихо ≠ пусто: суша, кварталы и пустота за границей данных —
     три разных тона, дороги читаются контрастом обводки. Громкое пятно одно —
     вода: в Дананге река и океан главные ориентиры. */
  --map-void:var(--pal-map-void); --map-earth:var(--pal-map-earth); --map-urban:var(--pal-map-urban);
  --map-green:var(--pal-map-green); --map-water:var(--pal-map-water); --map-water-line:var(--pal-map-water-line);
  --map-building:var(--pal-map-building); --map-building-line:var(--pal-map-building-line);
  /* Обводка дороги — САМОЕ ТЁМНОЕ из фоновых поверхностей, и это механика:
     улица читается как разрыв в застройке, только когда её кант темнее дома.
     Замер 07.09.2026: обводка #DDE3D7 и здание #DFE4D9 давали 1,01 — улица
     пропадала. Выбор владельца — повторить CARTO Positron. Затемнён ТОЛЬКО тон. */
  --map-road:var(--pal-white); --map-road-case:var(--pal-map-road-case);
  --map-road-minor:var(--pal-map-road-minor); --map-road-minor-case:var(--pal-map-road-minor-case);
  --map-label:var(--pal-map-label); --map-label-halo:var(--pal-map-earth);
  --map-district:var(--pal-map-district); --map-muted:var(--pal-map-muted); --map-boundary:var(--pal-map-boundary);
  /* Пятно плотности (дальний зум, 17.09.2026): СВОЯ роль, не --accent
     (владелец 19.09.2026). Прозрачность — на КАЖДЫЙ уровень
     `map.density_levels`; уровни вложены (три по .08 — ядро .22). Замер: на
     холсте пятно ложится поверх подписей, и подпись района под ядром держит
     4,6:1 (порог 4,5); при .10 было бы 4,25. */
  --map-density:var(--pal-teal);
  --map-density-alpha:.08 .08 .08;
  --radius:12px; --radius-sm:8px;
  /* Боковой жёлоб экрана — ОДИН на все блоки. Было четыре разных (6 у полосы
     чата, 8 у композера, 10 у ленты, 14 у карточки), и вертикально соседние
     блоки не выстраивались ни по одной линии: именно это читается как
     «блоки друг другу не подходят». */
  --gut:12px;
  /* Лестница слоёв — ОДНА и в одном месте. Разложенные по файлам числа
     разъезжаются молча: карточку подняли до 1200, чтобы перебить контролы
     Leaflet (у него 1000), и она накрыла собой модалки языка и города (900)
     и меню комнат (внутри чата, 700). Правило: всплывающее всегда выше того,
     из чего оно вызвано. */
  --z-map:500;    /* слои и сообщение карты — поверх карты */
  --z-card:1200;  /* карточка места — выше контролов ОБОИХ движков */
  --z-chat:1300;  /* чат и всё, что раскрывается из него вверх */
  /* Полноэкранный РЕЖИМ (барахолка) — ниже модалок: из него вызывают выбор
     города, и окно, открытое из режима, обязано лечь поверх него (frontend.md
     11). На одной ступени с модалками барахолка шла позже в разметке и
     накрывала выбор города — тап по городу «ничего не делал» (19.09.2026). */
  --z-mode:1900;
  --z-modal:2000; /* модалки во весь экран */
}
/* Тему ставит Telegram (data-theme). Этот блок — на секунду до запуска
   скрипта и на просмотр вне Telegram: без него страница успевает
   мигнуть белым. Защита :not([data-theme="light"]) — чтобы явный
   светлый выбор пользователя побеждал тёмную систему. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --paper:#0D1513; --surface:#151F1D; --surface-2:#1B2624; --sunk:#101A18;
  --ink:#E7EEE9; --ink-2:#A4B4AE; --ink-3:#7D8E88;
  --line:#28352F; --line-2:#33423C;
  /* Тёмная тема ещё не переведена на палитру (следующий шаг). Акцент —
     бирюза, как кнопка «Спросить» в тёмной: заливки и CTA теперь одна роль. */
  --accent:#4DBFE6; --accent-soft:#12302F; --on-accent:#08201F;
  --accent-ink:#4DBFE6; --cta-ink:#08201F;
  --danger:#E2647E; --ok:#5FBF8B; --like:#FF5C72;
  --l-rent:#E8944A; --l-sale:#D08A52; --l-food:#7FBE6A;
  --l-service:#9282D6; --l-poi:#6BA6D4; --l-leisure:#4E9BDE;
  --l-rent-soft:#3A2A19; --l-sale-soft:#33261A; --l-food-soft:#20301B;
  --l-service-soft:#282341; --l-poi-soft:#1E2C39; --l-leisure-soft:#1B2A3C;
  --l-rent-strong:#E8944A; --l-sale-strong:#D08A52; --l-food-strong:#7FBE6A;
  --l-service-strong:#9282D6; --l-poi-strong:#6BA6D4; --l-leisure-strong:#4E9BDE;
  --on-layer:#0D1513;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.6);
  --map-void:#0A100E; --map-earth:#141D1B; --map-urban:#18211F;
  --map-green:#17281B; --map-water:#0C2E3A; --map-water-line:#154453;
  --map-building:#1B2523; --map-building-line:#26312D;
  /* В тёмной теме та же болезнь была зеркальной: обводка #1A2320 против дома
     #1B2523 давала 1,02. Кант уводится НИЖЕ земли — в темноте он и должен
     быть самым глубоким тоном, иначе улица не отделяется от квартала. */
  --map-road:#33413B; --map-road-case:#0A0E0C;
  --map-road-minor:#232E2B; --map-road-minor-case:#0F1413;
  --map-label:#A4B4AE; --map-label-halo:#141D1B;
  --map-district:#E7EEE9; --map-muted:#74847E; --map-boundary:#2E3B36;
  /* В тёмной теме бирюза светлее и видна слабее — ступень .09: подпись
     района под ядром на холсте 4,8:1, при .10 было бы 4,6 на суше и 4,4 на
     кварталах. */
  --map-density-alpha:.09 .09 .09;
  --map-density:#43B4AF;   /* прежний тёмный акцент — пятно плотности не меняется */
  }
}

:root[data-theme="dark"]{
  --paper:#0D1513; --surface:#151F1D; --surface-2:#1B2624; --sunk:#101A18;
  --ink:#E7EEE9; --ink-2:#A4B4AE; --ink-3:#7D8E88;
  --line:#28352F; --line-2:#33423C;
  /* Тёмная тема ещё не переведена на палитру (следующий шаг). Акцент —
     бирюза, как кнопка «Спросить» в тёмной: заливки и CTA теперь одна роль. */
  --accent:#4DBFE6; --accent-soft:#12302F; --on-accent:#08201F;
  --accent-ink:#4DBFE6; --cta-ink:#08201F;
  --danger:#E2647E; --ok:#5FBF8B; --like:#FF5C72;
  --l-rent:#E8944A; --l-sale:#D08A52; --l-food:#7FBE6A;
  --l-service:#9282D6; --l-poi:#6BA6D4; --l-leisure:#4E9BDE;
  --l-rent-soft:#3A2A19; --l-sale-soft:#33261A; --l-food-soft:#20301B;
  --l-service-soft:#282341; --l-poi-soft:#1E2C39; --l-leisure-soft:#1B2A3C;
  --l-rent-strong:#E8944A; --l-sale-strong:#D08A52; --l-food-strong:#7FBE6A;
  --l-service-strong:#9282D6; --l-poi-strong:#6BA6D4; --l-leisure-strong:#4E9BDE;
  --on-layer:#0D1513;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.6);
  --map-void:#0A100E; --map-earth:#141D1B; --map-urban:#18211F;
  --map-green:#17281B; --map-water:#0C2E3A; --map-water-line:#154453;
  --map-building:#1B2523; --map-building-line:#26312D;
  /* В тёмной теме та же болезнь была зеркальной: обводка #1A2320 против дома
     #1B2523 давала 1,02. Кант уводится НИЖЕ земли — в темноте он и должен
     быть самым глубоким тоном, иначе улица не отделяется от квартала. */
  --map-road:#33413B; --map-road-case:#0A0E0C;
  --map-road-minor:#232E2B; --map-road-minor-case:#0F1413;
  --map-label:#A4B4AE; --map-label-halo:#141D1B;
  --map-district:#E7EEE9; --map-muted:#74847E; --map-boundary:#2E3B36;
  /* В тёмной теме бирюза светлее и видна слабее — ступень .09: подпись
     района под ядром на холсте 4,8:1, при .10 было бы 4,6 на суше и 4,4 на
     кварталах. */
  --map-density-alpha:.09 .09 .09;
  --map-density:#43B4AF;   /* прежний тёмный акцент — пятно плотности не меняется */
}