/*
 * ДИЗАЙН-ТОКЕНЫ — универсальный слой шаблона.
 *
 * Здесь заданы НЕЙТРАЛЬНЫЕ значения по умолчанию: так выглядит магазин без
 * какого-либо клиента. Ни одного упоминания конкретного бренда в этом файле
 * быть не должно — он общий для всех клиентов.
 *
 * Клиентская вариация (assets/css/client/<клиент>.css) переопределяет эти же
 * переменные своими значениями и подключается ПОСЛЕ. Больше она ничего не
 * трогает: ни каталог, ни корзину, ни оформление заказа.
 *
 * Правило: любое значение, которое встречается в оформлении больше одного
 * раза, становится токеном. Иначе следующий клиент — это не полчаса замены
 * переменных, а день поиска цветов по всему файлу.
 *
 * Префикс st- = shop-template.
 */

:root {
  /* ─── Цвет ─────────────────────────────────────────────────────────────
     Смысловые имена, а не названия цветов: `--st-color-primary`, а не
     `--st-blue`. У следующего клиента primary может быть зелёным, и тогда
     переменная с именем «blue» превращается в ловушку. */

  --st-color-primary:        #1c1e21;  /* кнопки, ссылки, акценты */
  --st-color-primary-hover:  #000000;
  --st-color-on-primary:     #ffffff;  /* текст на основном цвете */
  --st-color-accent:         #4a5568;  /* второстепенный акцент */

  --st-color-text:           #1c1e21;
  --st-color-text-muted:     #6b7280;  /* подписи, второстепенное */

  --st-color-surface:        #ffffff;  /* фон страницы и карточек */
  --st-color-surface-soft:   #f6f7f9;  /* подложки блоков */
  --st-color-border:         #e5e7eb;

  --st-color-footer-bg:      #1c1e21;  /* тёмный подвал */
  --st-color-footer-text:    #cbd5e1;

  /* Служебные — смысл у них одинаковый у всех клиентов, меняется только тон */
  --st-color-sale:           #d92d20;  /* цена со скидкой, плашка распродажи */
  --st-color-rating:         #f5a000;  /* звёзды рейтинга */
  --st-color-success:        #067647;  /* «в наличии», успешный заказ */
  --st-color-error:          #d92d20;

  /* Градиенты. Нейтральный шаблон обходится без них — клиент включает свои. */
  --st-gradient-header:      none;
  --st-gradient-hero:        var(--st-color-surface-soft);

  /* ─── Типографика ─────────────────────────────────────────────────────── */

  --st-font-body:            -apple-system, BlinkMacSystemFont, "Segoe UI",
                             Roboto, "Helvetica Neue", Arial, sans-serif;
  --st-font-heading:         var(--st-font-body);
  --st-weight-body:          400;
  --st-weight-heading:       700;

  --st-size-base:            16px;
  --st-line-body:            1.6;
  --st-line-heading:         1.25;

  /* ─── Форма ────────────────────────────────────────────────────────────
     Скругления задают характер сильнее, чем кажется: 0 — строгий магазин
     техники, 20 — мягкий магазин косметики. */

  --st-radius-hero:          12px;
  --st-radius-section:       12px;
  --st-radius-card:          10px;
  --st-radius-control:       8px;

  /* ─── Сетка и отступы ─────────────────────────────────────────────────── */

  --st-container:            1200px;
  --st-space:                24px;
  --st-space-sm:             12px;
  --st-space-lg:             48px;

  /* ─── Тени ─────────────────────────────────────────────────────────────── */

  --st-shadow-card:          0 1px 3px rgba(16, 24, 40, .08);
  --st-shadow-card-hover:    0 8px 24px rgba(16, 24, 40, .10);
  --st-shadow-hero:          0 13px 30px rgba(16, 24, 40, .12);
}

/* На узких экранах отступы сжимаются: на телефоне 24px по краям съедают
   пятую часть ширины экрана. Основной трафик магазинов — мобильный. */
@media (max-width: 768px) {
  :root {
    --st-space:      16px;
    --st-space-lg:   32px;
    --st-size-base:  15px;
  }
}