/* ============================================================================
   BRAND TOKENS — единственная точка правки фирменного стиля шаблона.
   Значения ниже — вычисленные величины исходного сайта (RECON/original-recon.json).
   Подключается ПОСЛЕ CSS сайта, поэтому переопределения выигрывают.
   ========================================================================== */
:root {
  /* --- палитра ------------------------------------------------------------ */
  /* База умышленно оставлена как в унаследованном CSS: #000/#fff/#9e9a9a
     встречаются там и захардкоженными (50/29/21 раз), поэтому смена токена
     дала бы разнобой. Меняем только акцент — он читается из токена. */
  --color-black: #000;
  --color-white: #fff;
  --color-lighter: #fff;
  /* Наследованный CSS использует --color-gray в 32 правилах для линий и
     лишь в 4 для текста (ни одно из них не встречается на наших страницах).
     Поэтому роли разведены: линейка светлая, вторичный текст — отдельный
     токен, проходящий 4.5:1 на белом (5.36:1). */
  --color-gray: #d2ccc5;      /* волосяные линии сетки и разделители */
  --color-muted: #6e6a66;     /* вторичный текст: подписи, сноски, метки */
  --color-green: #c9a227;     /* акцент: метки на карточках (охра) */
  --color-black-bg: #000;

  /* --- типографика -------------------------------------------------------- */
  /* Подменяете обе строки — меняется вся типографика сайта.                  */
  --font-body: Archivo, "Helvetica Neue", Helvetica, sans-serif;   /* body, h1/h3/h5, p, списки */
  --font-display: "Instrument Serif", Georgia, serif;         /* h2/h4/h6, .font-synt      */

  /* --- движение ----------------------------------------------------------- */
  /* Одна кривая на весь сайт. Длительность растёт с масштабом объекта:
     контрол → слайд → появление секции. Ничего вне этих трёх ступеней. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;   /* ссылки, кнопки, смена цвета */
  --dur-mid: 420ms;    /* подчёркивание, слайд карусели */
  --dur-slow: 700ms;   /* масштаб фото, появление секций */

  /* --- сетка и ритм ------------------------------------------------------- */
  --columns: 12;
  --margin: 2rem;          /* внешние поля сетки (1rem = 10px) */
  --gutter: 0rem;
  --max-width: 100vw;
  --default-padding-h: 2.0625rem;
  --header-h: 56px;
  --header-height: 86.66px;
  --header-height-desktop: 86.66px;
}

/* Переносим жёстко прописанные семейства на токены. Селекторы взяты
   один-в-один из CSS исходного сайта, поэтому раскладка не меняется. */
body,
body .h1, body h1,
body .h3, body h3,
body .h5, body h5,
body .p, body p,
body ol, body ul,
.font-founders { font-family: var(--font-body); }

body .h2, body h2,
body .h4, body h4,
body .h6, body h6,
body .p.name, body p.name,
body sub, body sup,
.font-synt,
[class*="_font-synt__"] { font-family: var(--font-display); }

[class*="header_search__"] [class*="header_searchField__"] input,
[class*="header_search__"] [class*="header_searchField__"] input::placeholder { font-family: var(--font-display); }

/* Акцент бейджей читает токен, а не захардкоженный зелёный. */
[class*="ProductFeatured_indication__"] { background-color: var(--color-green); }