/*
 * Общая палитра сайта v8pro.
 *
 * Как использовать в любом CSS-файле темы:
 *   .button {
 *     background-color: var(--v8pro-color-primary);
 *     color: var(--v8pro-color-on-primary);
 *   }
 *   .button:hover { background-color: var(--v8pro-color-primary-hover); }
 *   .card { color: var(--v8pro-color-text); }
 *
 * План перехода:
 * 1. Здесь храним общие цвета и называем их по назначению, а не по оттенку.
 * 2. Постепенно заменяем коды цветов в стилях на var(--v8pro-color-...).
 *    Совпадение кодов не всегда означает одинаковое назначение цвета.
 * 3. Общие переменные определяем только здесь; для особых блоков при
 *    необходимости создаём отдельные переменные со ссылками на эту палитру.
 *
 * Палитра используется на test-design.php. Остальные существующие стили темы
 * переводим на переменные постепенно.
 * Изменение переменной затронет только элементы, использующие её через var().
 * Состояния hover, active и focus задаются отдельно, автоматически оттенки
 * не пересчитываются. После правки обновите страницу; если на сайте включён
 * кеш страниц или CDN, при необходимости очистите его. Версия этого CSS
 * в WordPress обновляется по времени изменения файла.
 */

:root {
  /*
   * Новая основа: светлая тема https://prtner.ai/.
   * Источник: https://prtner.ai/site.css?v=382e6853d62f
   * Текст и границы взяты из CSS сайта. Нейтральные фоны разделены по уровням.
   * Зелёные акценты взяты из светлой темы GitHub Primer:
   * https://github.com/primer/primitives/blob/main/src/tokens/component/button.json5
   * https://github.com/primer/primitives/blob/main/src/tokens/functional/color/bgColor.json5
   * https://github.com/primer/primitives/blob/main/src/tokens/base/color/light/light.json5
   * Оранжевый — для акций и предупреждений, красный — для ошибок.
   * Шрифт остаётся Manrope; здесь задаются только цвета.
   * Состояния кнопок и текстовые цвета статусов адаптированы для читаемости.
   */

  /* Основное действие: почти чёрная кнопка, как --btn-bg у референса. */
  --v8pro-color-primary: #171717;
  /* Результат смешивания 86% основного цвета и 14% фона у референса. */
  --v8pro-color-primary-hover: #373737;
  --v8pro-color-primary-active: #0a0a0a;
  --v8pro-color-on-primary: #fafafa;

  /* GitHub button.primary: фон rest, hover, active и белый текст. */
  --v8pro-color-accent: #1f883d;
  --v8pro-color-accent-hover: #1c8139;
  --v8pro-color-accent-active: #197935;
  --v8pro-color-on-accent: #ffffff;
  /* GitHub bgColor.success.muted / base.color.green.0. */
  --v8pro-color-accent-subtle: #dafbe1;
  /* GitHub base.color.green.5 — текст на светлой зелёной подложке. */
  --v8pro-color-accent-text: #1a7f37;

  /* Бейджи разделены по смыслу; одинаковый смысл всегда имеет один цвет.
   * В карточке — не больше одного цветного бейджа, остальные нейтральные.
   * «Рекомендуем» — наш выбор; «Выбор пользователей» требует данных о выборе.
   */
  --v8pro-color-badge-recommendation-background: #dcfce7;
  --v8pro-color-badge-recommendation-text: #166534;
  --v8pro-color-badge-promo-background: #ffedd5;
  --v8pro-color-badge-promo-text: #9a3412;
  --v8pro-color-badge-neutral-background: #e8e8e8;
  --v8pro-color-badge-neutral-text: #454545;
  /* GitHub Primer blue.0 / blue.5: инструкции и справочные материалы. */
  --v8pro-color-badge-info-background: #ddf4ff;
  --v8pro-color-badge-info-text: #0969da;

  /* Голубые карточки выбора формата: палитра существующей страницы
   * /help/install-extension-1c/ (help-format-card в v8pro-help.css).
   */
  --v8pro-color-help-card-background: #f6f8fc;
  --v8pro-color-help-card-border: #dfe5f2;
  --v8pro-color-help-card-title: #071648;
  --v8pro-color-help-card-text: #63708f;
  --v8pro-color-help-card-icon-background: #eef4ff;
  --v8pro-color-help-card-icon: #005bff;
  --v8pro-color-help-card-background-hover: #f2f6ff;
  --v8pro-color-help-card-border-hover: #1768ff;

  /* Основной текст, подзаголовки, пояснения и светлый текст тёмных блоков. */
  --v8pro-color-text: #171717;
  /* Отдельный цвет подзаголовков: можно менять независимо от заголовков. */
  --v8pro-color-text-subtitle: #3d3d3d;
  --v8pro-color-text-muted: #666666;
  --v8pro-color-text-inverse-muted: #c9c9c9;

  /* Уровни нейтральных поверхностей: чем выше слой, тем светлее фон.
   * Страница -> большой блок -> вложенная карточка или поле ввода.
   * Цветные уведомления и акцентные блоки используют свои смысловые цвета.
   */
  --v8pro-color-background-page: #eef0f2;
  --v8pro-color-background-block: #f7f8fa;
  --v8pro-color-background-card: #ffffff;
  /* Самостоятельные тёмные блоки, например «Помощь с выбором». */
  --v8pro-color-background-dark: #232d43;

  /* --line и --line-strong светлой темы. */
  --v8pro-color-border: #e8e8e8;
  --v8pro-color-border-strong: #d4d4d4;

  /* Жирные нейтральные ссылки: при наведении усиливается только линия.
   * В CSS задаём text-decoration-thickness: 1px; hover — currentColor.
   */
  --v8pro-color-link: #171717;
  --v8pro-color-link-underline: #999999;

  /* Сервисные статусы: успех связан с основной зелёной палитрой.
   * Предупреждения сохраняют отдельный оранжевый оттенок для узнаваемости;
   * в кнопках, ссылках и декоративных элементах он не используется.
   */
  --v8pro-color-info: #3d3d3d;
  --v8pro-color-info-background: #f5f5f5;
  --v8pro-color-success: var(--v8pro-color-accent-text);
  --v8pro-color-success-background: var(--v8pro-color-accent-subtle);
  --v8pro-color-warning: #8d5709;
  --v8pro-color-warning-background: #f8f2e7;
  --v8pro-color-error: #b42318;
  --v8pro-color-error-background: #fef3f2;

  /* Контур фокуса следует за цветом акцента. */
  --v8pro-color-focus: var(--v8pro-color-accent);
}