/* ══════════════════════════════════════════════════════════════════════════
   КОНТРАСТ АКЦЕНТНЫХ КНОПОК
   ══════════════════════════════════════════════════════════════════════════

   Белый текст на акцентной заливке не читался. Замеры по WCAG (нужно 4.5
   для текста 16px):

       Полночь   1.87     Орхидея  2.46     Сакура  2.65
       Тёмная    3.27     Светлая  4.47     Fate    5.42

   Это «Оформить заказ», «＋» в каталоге и кнопка корзины в доке — то, на что
   в приложении нажимают чаще всего. В Тёмной и Светлой провал был и до
   появления новых тем; в Полночи стало вдвое хуже базовой.

   Разбирается двумя способами, по обстоятельствам цвета:

   1. Где акцент можно затемнить, не потеряв тему, — затемняется. Фиолетовый,
      индиго, фуксия и розовый остаются собой при белом тексте.

   2. Голубой затемнить нельзя: он от этого перестаёт быть голубым и уезжает
      в тёмно-синий, а Полночь держится именно на нём. Поэтому там меняется
      не заливка, а текст — тёмный по яркому голубому даёт 9.67 против 1.87
      и сохраняет цвет темы.

   Отсюда --on-acc: цвет текста на акцентной заливке. По умолчанию белый,
   переопределяется только там, где заливка светлая. */

:root {
  --acc-1: #6f5ae8;   /* было #8b7cff — 3.27 */
  --acc-2: #5442c0;
  --on-acc: #ffffff;
}
body.theme-light {
  --acc-1: #5b5ce0;   /* было #6366f1 — 4.47 */
  --acc-2: #4f46e5;
  --on-acc: #ffffff;
}
body.theme-midnight {
  --acc-1: #7dd8fc;
  --acc-2: #22b0ee;
  --on-acc: #04263f;  /* тёмный по голубому: 9.67 и 6.29 */
}
body.theme-orchid {
  --acc-1: #c026d3;   /* было #e879f9 — 2.46 */
  --acc-2: #8e1a9e;
  --on-acc: #ffffff;
}
body.theme-sakura {
  --acc-1: #db2777;   /* было #f472b6 — 2.65 */
  --acc-2: #be185d;
  --on-acc: #ffffff;
}
body.theme-fate { --on-acc: #ffffff; }

/* Кнопка корзины в доке жила на --p/--pd, а не на акцентной паре, и потому
   осталась бы нечитаемой в Полночи и Орхидее вместе со всеми остальными.
   Переводится сюда же. */
#cta,
.sh-btn,
body.theme-light .sh-btn,
.add-btn,
.theme-light .add-btn,
.calc-add-btn,
body.theme-light .calc-add-btn {
  background: linear-gradient(135deg, var(--acc-1), var(--acc-2));
  color: var(--on-acc);
}
.hdr-ico, body.theme-light .hdr-ico { color: var(--on-acc); }

/* Состояния «добавлено» и «количество» акцентной заливки не имеют —
   у них свой фон и свой цветной текст, --on-acc им не подходит. */
.add-btn.is-added { background: var(--gr-soft); color: var(--gr); }
.add-btn.is-qty {
  background: linear-gradient(160deg, var(--s3), var(--s2));
  color: var(--p);
}