/* ============================================================
   Ambrella — Design Tokens (canonical)
   Источник: реальный код сайта (styles.css, страницы about /
   contacts / materials, карточки сравнения, переключатель).
   Похожие по смыслу значения сведены в одну переменную —
   см. комментарии «свод».
   ============================================================ */
:root{
  /* — Brand / синий — */
  --blue:#3888b6;          /* основной фирменный синий (был: --blue/--ab-blue/--ap-blue/--mp-blue/--cp-blue) */
  --blue-hover:#2f7aa1;    /* наведение на синий */
  --blue-border:#3483b8;   /* синяя рамка (тот же тон) */
  --blue-deep:#1e6094;     /* активная заливка (ON) */
  --navy:#183f64;          /* тёмно-синий акцент / заголовки */

  /* — Ink / тёмные поверхности — */
  --ink:#000;              /* основной текст */
  --ink-soft:#1c2632;      /* мягкий тёмный текст / поверхность */
  --surface-dark:#1a2a3a;  /* тёмная подложка геро/баннера */
  --surface-darker:#0a1828;/* тёмное наложение на фото */

  /* — Surfaces / нейтральные фоны — */
  --white:#fff;
  --bg:#f4f4f4;            /* фон страницы (серый) */
  --surface-1:#fafafa;     /* чуть тёплый светлый фон */
  --surface-2:#f0f0f0;     /* фон при наведении */
  --track-off:#f0f2f4;     /* трек переключателя OFF */
  --blue-tint:#eef4f8;     /* синеватый фон при наведении */
  --neutral-200:#e8e8e8;   /* свод близких светло-серых (#e5e7ea·#e7e9ec·#e8e8e8·#e9e9e9·#e9edf0·#eaeef0) */
  --neutral-300:#d9d9d9;   /* серый делитель / заглушка */
  --map-water:#cfe0ea;     /* вода на карте */

  /* — Lines / границы — */
  --border:#a4a3a3;        /* граница поля / карточки */
  --border-soft:#9f9f9f;   /* мягкая граница */

  /* — Muted text — */
  --muted:#707070;         /* приглушённый текст / хлебные крошки */
  --placeholder:#8d95a2;   /* плейсхолдеры и иконки полей (свод #8a8f96·#8a9099) */

  /* — Radii — */
  --r-xs:2px;              /* свод 2·3 */
  --r-sm:5px;              /* свод 4·5·7 — поля, кнопки */
  --r-md:10px;             /* свод 10·12 — карточки */
  --r-lg:15px;             /* свод 15·20 — крупные блоки */
  --r-pill:999px;
  --r-round:50%;

  /* — Shadows — */
  --shadow-sm:0 3px 3px rgba(0,0,0,.18);          /* шапка, мелкие подъёмы */
  --shadow-btn:2px 2px 4px rgba(0,0,0,.25);       /* кнопки, поля */
  --shadow-pop:3px 3px 6px rgba(0,0,0,.28);       /* выпадающие / поповеры */
  --shadow-card:0 4px 8px rgba(0,0,0,.06);        /* карточки */
  --shadow-product-card:2px 2px 2px rgba(0,0,0,.25); /* карточка товара: только справа и снизу */
  --focus-ring:0 0 0 3px rgba(56,136,182,.3);     /* фокус */

  /* — Type — */
  --font:"Open Sans","Helvetica Neue",Arial,sans-serif;

  /* — Layout — */
  --col:1490px;            /* ширина контентной колонки */

  /* — Spacing rhythm (шаг 8px) — */
  --s-1:8px;  --s-2:16px;  --s-3:24px;  --s-4:32px;
  --s-5:48px; --s-6:64px;  --s-7:80px;

  /* — Page layout gaps — */
  --page-gap:30px;

  /* — Слои (z-index) — лесенка с шагом 100:
     100  sticky-элементы  400  пикер каталога
     500  шапка            600  панели/поиск/лист
     700  модалки          800  тултипы
     .lb-dialog — top layer (showModal), вне шкалы намеренно — */
  --z-sticky:  100;
  --z-picker:  400;
  --z-header:  500;
  --z-panel:   600;
  --z-modal:   700;
  --z-tooltip: 800;
}