/* Основания оформления «Кадра».
 *
 * Три правила, из которых выведено всё остальное.
 *
 * 1. ИНТЕРФЕЙС СЕРЫЙ И НЕЙТРАЛЬНЫЙ. Не из скромности: любой цветной или
 *    тёплый интерфейс сдвигает восприятие цвета картинки, и человек правит
 *    баланс белого «в другую сторону». Поэтому вся оболочка построена на одной
 *    ахроматической шкале, а цвет в ней — только у того, что требует внимания.
 * 2. ОДИН АКЦЕНТ. Радуга из подсветок превращает панель в ёлку и перестаёт
 *    значить хоть что-нибудь.
 * 3. ПЛОТНО, НО НЕ ТЕСНО. Строка списка — 26 точек, кнопка — 28: на экране
 *    помещается много, при этом попасть мышью легко. Ниже 24 не опускаемся.
 */

:root {
  color-scheme: dark;

  /* Ахроматическая шкала: от самого тёмного к светлому. */
  --к-0: #0d0f11;
  --к-1: #14171a;
  --к-2: #1b1f23;
  --к-3: #23282d;
  --к-4: #2d333a;
  --к-5: #3a424a;
  --к-6: #4c565f;

  --фон: var(--к-1);
  --фон-панели: rgba(27, 31, 35, 0.86);
  /* Тот же цвет, но БЕЗ прозрачности — закреплённой панели, под которой
   * проезжают чужие: сквозь неё их видно быть не должно. */
  --фон-панели-плотный: #1b1f23;
  --фон-плавающей: rgba(20, 23, 26, 0.92);
  --фон-поля: var(--к-0);
  --фон-кнопки: var(--к-3);
  --фон-кнопки-над: var(--к-4);
  --холст-поле: #101315;

  --текст: #e8ecef;
  --текст-тише: #a7b1b9;
  /* Было #6f7b84 — и не дотягивало: 4,45 на полотне и 4,12 на панели при
   * нужных 4,5 (WCAG 2, обычный текст). Этим цветом набрана строка состояния,
   * то есть ровно то, чем программа отвечает человеку. Поднято на одиннадцать
   * единиц — ровно до порога, не больше: тихое должно остаться тихим.
   * Проверяет `проверки/контраст.mjs`. */
  --текст-совсем-тихо: #7a868f;

  --край: rgba(255, 255, 255, 0.08);
  --край-ярче: rgba(255, 255, 255, 0.14);
  --тень-панели: 0 12px 32px rgba(0, 0, 0, 0.45);
  --тень-плавающей: 0 24px 64px rgba(0, 0, 0, 0.55);

  /* Единственный акцент. Холодный синий: он не спорит с телесными и тёплыми
   * тонами, которых в картинках большинство. */
  --акцент: #4c8dff;
  --акцент-тише: rgba(76, 141, 255, 0.18);
  --акцент-текст: #ffffff;
  --добро: #46c08a;
  --беда: #ff6a6a;
  --внимание: #f0b429;
  --участок: #b083ff;
  --участок-тише: rgba(176, 131, 255, 0.16);

  --радиус-1: 6px;
  --радиус-2: 10px;
  --радиус-3: 14px;

  --строка: 26px;
  --кнопка: 28px;
  --шрифт: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
           system-ui, "Segoe UI", sans-serif;
  --шрифт-цифр: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --кегль: 12.5px;
  --кегль-мелкий: 11px;

  /* Подсказка живёт своей парой цветов, а не общей.
   * Прежде фон был жёстко тёмным, а текст брался из темы — и в светлой и
   * цветной темах выходил тёмный по тёмному, то есть невидимый (жалоба
   * владельца 10.09.2026). */
  --подсказка-фон: rgba(12, 14, 16, 0.96);
  --подсказка-текст: #f2f5f7;
  --подсказка-тише: rgba(242, 245, 247, 0.6);

  --скорость: 130ms;
  --кривая: cubic-bezier(0.32, 0.72, 0, 1);
}

:root[data-тема="светлая"] {
  color-scheme: light;
  --подсказка-фон: rgba(28, 32, 36, 0.97);
  --подсказка-текст: #ffffff;
  --подсказка-тише: rgba(255, 255, 255, 0.62);
  --к-0: #ffffff;
  --к-1: #f2f3f5;
  --к-2: #e8eaed;
  --к-3: #dcdfe3;
  --к-4: #cfd4d9;
  --к-5: #b6bdc4;
  --к-6: #97a1a9;

  --фон: var(--к-1);
  --фон-панели: rgba(248, 249, 250, 0.88);
  --фон-панели-плотный: #f8f9fa;
  --фон-плавающей: rgba(252, 252, 253, 0.94);
  --фон-поля: #ffffff;
  --фон-кнопки: #ffffff;
  --фон-кнопки-над: var(--к-2);
  --холст-поле: #d8dcdf;

  --текст: #1b1f23;
  --текст-тише: #55606a;
  /* Было #838f99: 2,98 на полотне при нужных 4,5. Этим набрана строка
   * состояния — то, чем программа отвечает человеку. */
  --текст-совсем-тихо: #636f79;

  --край: rgba(0, 0, 0, 0.10);
  --край-ярче: rgba(0, 0, 0, 0.18);
  --тень-панели: 0 10px 26px rgba(0, 0, 0, 0.12);
  --тень-плавающей: 0 20px 50px rgba(0, 0, 0, 0.18);

  /* СЛУЖЕБНЫЕ ЦВЕТА — СВОИ ДЛЯ СВЕТЛОГО ФОНА.
   *
   * Раньше здесь их не было вовсе, и на светлое полотно ложились тёмные:
   * «получилось» давало 2,06, «не вышло» — 2,51, предупреждение — 1,68 при
   * нужных 4,5. То есть ровно те три цвета, которыми программа отвечает
   * человеку, на светлой теме почти не читались. Найдено 15.09.2026
   * `проверки/контраст.mjs`, когда её научили смотреть КАЖДУЮ тему: до этого
   * она брала последнее объявление в файле и молча судила об одной.
   *
   * Тон оставлен тот же, опущена светлота и чуть убрана насыщенность — с
   * запасом до 4,8, а не впритык к порогу. */
  --добро: #2d7756;
  --беда: #d50909;
  --внимание: #89640f;
  --участок: #6b3fc4;
  --участок-тише: rgba(107, 63, 196, 0.13);
}

/* Кому важно видеть картинку и ничего кроме — вся оболочка гаснет до
 * почти-чёрного. Отдельная тема, а не «полноэкранный режим»: свет от панелей
 * в тёмной комнате мешает судить о тенях. */
:root[data-тема="ночь"] {
  --к-1: #08090a;
  --к-2: #0e1012;
  --к-3: #16191c;
  --к-4: #1f2327;
  --фон: var(--к-1);
  --фон-панели: rgba(14, 16, 18, 0.9);
  --фон-панели-плотный: #0e1012;
  --холст-поле: #050607;
  --текст: #d6dbdf;
}

/* Цветная тема.
 *
 * Замысел владельца: панель узнаётся цветом, а не чтением заголовка. Глаз
 * находит «жёлтую» быстрее, чем читает слово «Свет», — на этом держатся все
 * приборные панели, от авиационных до студийных пультов.
 *
 * Три правила, чтобы это не стало ёлкой:
 * · цвет держится ТОЛЬКО в шапке панели и в её главной кнопке. Тело панели
 *   остаётся нейтральным — иначе цвет полезет в восприятие картинки;
 * · сами цвета приглушены (насыщенность около половины): яркие спорят с
 *   изображением, а различаются ничуть не лучше;
 * · поле вокруг холста настраивается отдельно, от белого до чёрного: судить о
 *   светлоте картинки можно только на нейтральном фоне, и какой именно фон
 *   нейтрален — решает работа, а не тема.
 */
:root[data-тема="цветная"] {
  color-scheme: light;
  --подсказка-фон: rgba(24, 28, 33, 0.97);
  --подсказка-текст: #ffffff;
  --подсказка-тише: rgba(255, 255, 255, 0.62);
  --к-0: #ffffff;
  --к-1: #eef0f2;
  --к-2: #e4e7ea;
  --к-3: #d8dce0;
  --к-4: #c8ced4;
  --к-5: #aab2ba;
  --к-6: #8b959e;

  --фон: var(--к-1);
  --фон-панели: rgba(252, 252, 253, 0.92);
  --фон-панели-плотный: #fcfcfd;
  --фон-плавающей: rgba(253, 253, 254, 0.96);
  --фон-поля: #ffffff;
  --фон-кнопки: #ffffff;
  --фон-кнопки-над: var(--к-2);
  --холст-поле: var(--поле-вокруг, #9aa3aa);

  --текст: #14181c;
  --текст-тише: #4b555e;
  /* Было #7b858e: 3,29 при нужных 4,5 — см. светлую тему. */
  --текст-совсем-тихо: #636d76;

  --край: rgba(0, 0, 0, 0.12);
  --край-ярче: rgba(0, 0, 0, 0.22);
  --тень-панели: 0 8px 20px rgba(30, 40, 50, 0.14);
  --тень-плавающей: 0 18px 44px rgba(30, 40, 50, 0.22);

  /* Служебные цвета — свои, по той же причине, что и у светлой темы:
   * тёмные на светлом полотне давали 2,01 / 2,44 / 1,63 при нужных 4,5. */
  --добро: #2c7655;
  --беда: #d30909;
  --внимание: #86620f;
  --участок: #683dc0;
  --участок-тише: rgba(104, 61, 192, 0.13);
}

/* Шапка красится своим цветом, текст в ней — светлый. */
/* ЦВЕТНАЯ ТЁМНАЯ.
 *
 * Владелец 13.09.2026: «сделай дополнительную тёмную тему с цветами как
 * светлая цветная; следи за кнопками и подписями, чтобы были контрастными».
 *
 * Цвет панелей здесь ровно тот же — узнаваемость по цвету и должна быть
 * одинаковой в обеих темах, иначе привычка «жёлтая — это свет» не переносится.
 * Меняется только основание: ахроматическая шкала берётся тёмная.
 *
 * Признак `data-краски` на корне — общий для обеих цветных тем; по нему
 * работают все правила `[data-цвет]`. Дублировать их вторым набором
 * селекторов значило бы завести две копии, которые разойдутся в первый же
 * день.
 *
 * Про контраст: цвета панелей приглушены и на тёмном дают белому тексту от
 * 4,6 (самый светлый, бирюзовый край, уходит в тёмный текст — это решает
 * `читаемыйНа`). Тела панелей остаются нейтральными, как и в светлой цветной:
 * цвет в теле полез бы в восприятие картинки.
 */
:root[data-тема="цветная-тёмная"] {
  color-scheme: dark;
  /* Чуть теплее и мягче обычной тёмной: рядом с цветными шапками
   * иссиня-чёрный фон выглядит провалом. */
  --к-0: #101215;
  --к-1: #171a1e;
  --к-2: #1e2227;
  --к-3: #272c32;
  --к-4: #323841;
  --к-5: #404852;
  --к-6: #55606b;

  --фон: var(--к-1);
  --фон-панели: rgba(30, 34, 39, 0.88);
  --фон-панели-плотный: #1e2227;
  --фон-плавающей: rgba(23, 26, 30, 0.94);
  --фон-поля: var(--к-0);
  --фон-кнопки: var(--к-3);
  --фон-кнопки-над: var(--к-4);
  --холст-поле: var(--поле-вокруг, #14171a);

  --текст: #eaeef1;
  --текст-тише: #aab4bd;
  /* Было #77828c: 4,45 и 4,12 — чуть не дотягивало до 4,5. */
  --текст-совсем-тихо: #808b95;

  --край: rgba(255, 255, 255, 0.10);
  --край-ярче: rgba(255, 255, 255, 0.18);
  --тень-панели: 0 12px 30px rgba(0, 0, 0, 0.5);
  --тень-плавающей: 0 24px 60px rgba(0, 0, 0, 0.6);
}

:root[data-краски] .панель[data-цвет] .шапка-панели {
  background: var(--цвет-панели);
  border-bottom-color: rgba(0, 0, 0, 0.15);
}
/* `--текст-на-панели` считается по яркости самой краски (`читаемыйНа` в
 * main.js): на светлых панелях белый текст нечитаем. */
:root[data-краски] .панель[data-цвет] .шапка-панели .название {
  color: var(--текст-на-панели, #fff);
}
:root[data-краски] .панель[data-цвет] .шапка-панели .стрелка,
:root[data-краски] .панель[data-цвет] .шапка-панели .кнопка-шапки {
  color: var(--текст-на-панели, #fff); opacity: 0.85;
}
:root[data-краски] .панель[data-цвет] .шапка-панели .кнопка-шапки:hover {
  background: rgba(255, 255, 255, 0.22); color: #fff;
}
/* Главная кнопка панели — того же цвета, что её шапка: панель и её действие
 * читаются как одно целое. */
:root[data-краски] .панель[data-цвет] .кнопка.главная {
  background: var(--цвет-панели);
}
:root[data-краски] .панель[data-цвет] .фишка[data-выбрана] {
  background: var(--цвет-панели); border-color: transparent;
}
:root[data-краски] .панель[data-цвет] .ползунок .налив,
:root[data-краски] .панель[data-цвет] .шаг[data-нынешний] {
  background: var(--цвет-панели);
}
:root[data-краски] .панель[data-цвет] .слой[data-выбран] {
  background: color-mix(in srgb, var(--цвет-панели) 16%, transparent);
  border-color: color-mix(in srgb, var(--цвет-панели) 40%, transparent);
}

/* Значки инструментов красятся по разделам — тем же цветом, что и панель,
 * к которой раздел относится по смыслу. */
:root[data-краски] .кучка[data-раздел="правка"] .инструмент { color: #4a7bc8; }
:root[data-краски] .кучка[data-раздел="кисти"] .инструмент { color: #c07a3e; }
:root[data-краски] .кучка[data-раздел="фигуры"] .инструмент { color: #7a6bbf; }
:root[data-краски] .кучка[data-раздел="эффекты"] .инструмент { color: #3f9aa0; }
:root[data-краски] .кучка[data-раздел="умные"] .инструмент { color: #5f9a5f; }
:root[data-краски] .кучка[data-раздел="вид"] .инструмент { color: #8a8f96; }
:root[data-краски] .кучка[data-раздел="вектор"] .инструмент { color: #6e63c4; }
:root[data-краски] .инструмент[data-выбран] {
  background: color-mix(in srgb, currentColor 18%, transparent);
  border-color: color-mix(in srgb, currentColor 42%, transparent);
}