/* Токены оформления.

   Подача деловая и плотная: покупатель спецтехники сравнивает цифры,
   а не любуется картинками. Отсюда сдержанный цвет, компактные
   отступы и акцент на цене и характеристиках.

   Цвет действия синий, а не оранжевый: оранжевый в этой нише занят
   предупреждающей окраской самой техники, и кнопка теряется среди фото. */

:root {
  /* Нейтральная шкала. Основной текст почти чёрный, но не чистый:
     чистый чёрный на белом даёт лишний контраст и утомляет. */
  --c-ink: #14181f;
  --c-ink-2: #47505f;
  --c-ink-3: #6b7585;
  --c-line: #e3e7ee;
  --c-line-2: #f0f3f7;
  --c-bg: #ffffff;
  --c-bg-2: #f7f9fc;
  --c-bg-3: #eef2f8;

  /* Действие и статусы */
  --c-accent: #1e5bd6;
  --c-accent-dark: #1747aa;
  --c-accent-soft: #eaf1fe;
  --c-success: #12805c;
  --c-success-soft: #e6f5ef;
  --c-warn: #a86200;
  --c-warn-soft: #fdf2e2;
  --c-danger: #c02b2b;
  --c-price: #14181f;

  /* Типографика. Одна гарнитура на весь проект. */
  --font: 'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 32px;
  /* Ступень для первого экрана: заголовок витрины крупнее
     заголовка раздела, но в шкале для него места не было. */
  --fs-3xl: 36px;
  --lh-tight: 1.25;
  --lh-base: 1.5;

  /* Шаг сетки 4 пикселя: плотная подача не терпит произвольных отступов. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-11: 44px;
  --s-12: 48px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --shadow-card: 0 1px 2px rgba(20, 24, 31, .06), 0 1px 8px rgba(20, 24, 31, .04);
  --shadow-sticky: 0 -2px 12px rgba(20, 24, 31, .10);

  --container: 1280px;
  --header-h: 56px;
}

/* Тёмная тема не выдумывается, а выводится из тех же токенов.
   Пока не включена, но переменные заведены, чтобы потом не искать
   захардкоженные цвета по всем файлам. */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --c-ink: #eef1f6;
    --c-ink-2: #b3bccb;
    --c-ink-3: #8b96a8;
    --c-line: #2a3240;
    --c-line-2: #222936;
    --c-bg: #12161d;
    --c-bg-2: #171c25;
    --c-bg-3: #1d2430;
    --c-accent-soft: #16233a;
    --c-price: #eef1f6;
  }
}