/*
 * КЛИЕНТСКАЯ ВАРИАЦИЯ: Plackers
 *
 * Значения взяты из delivery-package/config/brand.json.
 *
 * Файл содержит ТОЛЬКО переопределение токенов — ни одного правила вёрстки,
 * ни одного селектора каталога, корзины или checkout. Если сюда once попадёт
 * правило вида `.woocommerce ul.products { … }`, шаблон перестанет быть
 * шаблоном: следующему клиенту придётся разбирать, что здесь про бренд, а
 * что про магазин вообще.
 *
 * Подключается ПОСЛЕ tokens.css — см. inc/enqueue.php.
 * Чтобы отключить вариацию, достаточно сменить настройку темы; трогать
 * универсальный слой не нужно.
 */

:root {
  /* ─── Фирменные цвета ──────────────────────────────────────────────────── */

  --st-color-primary:        #0067A8;
  --st-color-primary-hover:  #00548B;
  --st-color-on-primary:     #ffffff;
  --st-color-accent:         #00A69E;   /* бирюзовый */

  --st-color-text:           #19212A;
  --st-color-text-muted:     #52646F;

  --st-color-surface:        #FFFFFF;
  --st-color-surface-soft:   #F2F6F8;

  --st-color-footer-bg:      #142B3B;

  --st-color-sale:           #EF4A5C;
  --st-color-rating:         #F5A000;

  /* ─── Градиенты ────────────────────────────────────────────────────────
     Шапка и первый экран — узнаваемая часть концепции Plackers. */

  --st-gradient-header: linear-gradient(
    90deg,
    #BDDFEB 0%,
    #CCE8E5 50%,
    #BFD8ED 100%
  );

  --st-gradient-hero: linear-gradient(
    120deg,
    #9FDDD9 0%,
    #D8F4E9 50%,
    #9CCFEA 100%
  );

  /* ─── Типографика ──────────────────────────────────────────────────────
     Inter. Пока файлы шрифта не загружены в assets/fonts/, работает
     системный запасной вариант — вёрстка от этого не ломается. */

  --st-font-body:            Inter, -apple-system, BlinkMacSystemFont,
                             "Segoe UI", Roboto, Arial, sans-serif;
  --st-font-heading:         var(--st-font-body);
  --st-weight-body:          400;
  --st-weight-heading:       500;   /* у концепции заголовки не жирные */

  /* ─── Скругления ───────────────────────────────────────────────────────── */

  --st-radius-hero:          20px;
  --st-radius-section:       18px;
  --st-radius-card:          14px;
  --st-radius-control:       11px;

  /* ─── Сетка ────────────────────────────────────────────────────────────
     В концепции было 1440, но по факту выигрыша это не дало: с боковой
     колонкой в ряд всё равно помещаются четыре карточки, а не пять.
     Разница только в том, что при 1440 карточки шире (250 против 205 px).
     По решению Andrei оставлена стандартная ширина. */

  --st-container:            1200px;

  /* ─── Тени ─────────────────────────────────────────────────────────────
     С синим подтоном, а не серые: на голубых фонах концепции нейтральная
     серая тень выглядит грязным пятном. */

  --st-shadow-card:          0 8px 24px rgba(16, 60, 80, .08);
  --st-shadow-card-hover:    0 12px 28px rgba(16, 60, 80, .14);
  --st-shadow-hero:          0 13px 30px rgba(10, 102, 139, .16);

  /* ─── Акценты плиток категорий ─────────────────────────────────────────
     Четыре разных оттенка вместо одного: так плитки различимы боковым
     зрением, и глаз быстрее находит нужный раздел. */

  --st-cat-1: #BFE6F5;
  --st-cat-2: #BFE9D9;
  --st-cat-3: #F4DCA8;
  --st-cat-4: #DEC7F1;

  --st-cat-shadow-1: 0 9px 24px rgba(0, 145, 194, .13);
  --st-cat-shadow-2: 0 9px 24px rgba(0, 166, 130, .13);
  --st-cat-shadow-3: 0 9px 24px rgba(224, 160, 38, .13);
  --st-cat-shadow-4: 0 9px 24px rgba(141, 73, 190, .13);

  /* ─── Блоки главной ────────────────────────────────────────────────────── */

  --st-color-benefit-bg:   #E6F5F4;
  --st-color-benefit-text: #23484B;
  --st-color-brand-bg:     #E6F3F9;
  --st-gradient-brand:     linear-gradient(145deg, #0065A7, #00A7A3);
}