/* ============================================================
   ТОКЕНЫ ДИЗАЙН-СИСТЕМЫ — АкваКристалл / voda.by
   Источник значений: КОНТЕКСТ-ПРОЕКТА.md §6.1, §6.3, §6.4
   Цвета, размеры и тайминги задаются только здесь.
   ============================================================ */

:root {
  color-scheme: dark;

  /* --- Поверхности (§6.1) ------------------------------------ */
  --c-bg:            #0F1114;  /* фон основной, глубокий графит */
  --c-bg-alt:        #16191E;  /* чередование секций            */
  --c-surface:       #1C2027;  /* карточки                      */
  --c-surface-2:     #22272F;  /* карточка при наведении        */
  --c-line:          #2A3038;  /* границы, разделители          */
  --c-line-strong:   #3A424D;  /* границы активных элементов    */

  /* --- Текст -------------------------------------------------- */
  --c-text:          #F2F4F6;
  --c-text-dim:      #9BA5B0;
  --c-text-mute:     #6B7581;

  /* --- Красные ------------------------------------------------ */
  --c-accent:        #D8232A;  /* кнопки, активное — проходит по контрасту */
  --c-accent-hi:     #F03B42;  /* hover / focus                            */
  --c-brand:         #8F0000;  /* фирменный из PSD: плашки, заливки        */
  --c-brand-deep:    #6A1819;  /* градиенты, глубина                       */
  --c-brand-mid:     #972426;  /* цвет текущего сайта, преемственность     */
  --c-accent-soft:   rgba(216, 35, 42, 0.12);
  --c-accent-line:   rgba(216, 35, 42, 0.34);

  /* --- Служебные статусы (панель анализа воды) ---------------- */
  --c-warn:          #E8A33D;
  --c-ok:            #4FB477;

  /* --- Светлая пластина под снимок товара ---------------------
     Каталог единственный, где фон под кадром светлый: корпуса
     систем сами белые и на графите пропадают. Значение совпадает
     с подложкой, на которую _скрипты/prep_product_card.py кладёт
     снимки, — иначе по краю плитки встаёт шов. */
  --c-plate:         #FAFBFC;

  /* --- Типографика (§6.4) ------------------------------------- */
  --f-head: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Шкала: H1 34–56 против 16–19 основного текста (§6.3).
     ⚠️ Успокоена 13.08.2026 по замечанию заказчика: разрыв между самым
     крупным и основным текстом был слишком велик — 104 против 19 на
     широком экране, это 5,5 раза. Верхние концы срезаны, нижние
     не тронуты: на телефоне кегль прежний, переполнений не прибавилось.
     Теперь отношение 80 к 19 — примерно 4,2 раза.
     Прежние значения, если понадобится откатить:
       display 6.5rem/7.4vw · h1 4.25rem/4.3vw · h2 3.25rem/2.8vw */
  --fs-display: clamp(2.5rem, 1.1rem + 5.6vw, 5rem);      /* 40 → 80  */
  --fs-h1:      clamp(2.125rem, 1.3rem + 3.4vw, 3.5rem);  /* 34 → 56  */
  --fs-h2:      clamp(1.625rem, 1.1rem + 2.3vw, 2.75rem); /* 26 → 44  */
  --fs-h3:      clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --fs-h4:      clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.94rem + 0.32vw, 1.1875rem); /* 16 → 19  */
  --fs-sm:      clamp(0.9375rem, 0.91rem + 0.12vw, 1rem); /* 15 → 16  */
  --fs-xs:      clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --fs-label:   0.6875rem;                              /* мелкие капсы */

  --lh-tight:  1.02;
  --lh-head:   1.1;
  --lh-body:   1.6;
  --ls-tight:  -0.03em;
  --ls-label:  0.16em;

  /* --- Ритм и сетка ------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;   --sp-11: 6rem;    --sp-12: 8rem;

  --section-y:  clamp(4rem, 2.5rem + 5vw, 8rem);
  --gutter:     clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  /* Шире с 08.08.2026: было 1360px. Шапка идёт во всю ширину окна,
     а логотип прижат к самому краю (§4.4) — при контейнере 1360
     тело сайта отставало от шапки на 280px с каждой стороны
     на экране 1920, и страница читалась как съехавшая вправо.
     1560 подтягивает содержимое к краям и к логотипу. */
  --container:  1560px;
  --measure:    68ch;                              /* строка 65–75 знаков */
  --margin-col: clamp(0px, -7rem + 9vw, 7rem);     /* поле под индексы секций */

  /* --- Скругления ---------------------------------------------
     §6.3 требует единообразия. Две ступени, без разнобоя:
     поверхности и медиа — 14px, управляющие элементы — 10px.   */
  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 4px;
  --r-pill: 999px;

  /* --- Движение (§6.3: только transform / opacity) ------------ */
  --d-fast:   140ms;
  --d-base:   220ms;
  --d-slow:   420ms;
  --e-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Слои ---------------------------------------------------- */
  --z-base:   1;
  --z-sticky: 10;
  --z-header: 20;
  --z-drawer: 30;
  --z-modal:  50;

  /* --- Размеры интерфейса ------------------------------------- */
  --tap:         44px;   /* минимальная тач-цель */
  --header-h:    76px;
  --topbar-h:    40px;
  --mobilebar-h: 62px;
}

@media (max-width: 1023px) {
  :root {
    --header-h: 62px;
    --topbar-h: 0px;
  }
}