/* ════════════════════════════════════════════════════════════════════
   fluid-core.css — ЯДРО «резиновой» (zoom) системы. УНИВЕРСАЛЬНОЕ.
   Подключать ОДИН раз на КАЖДОЙ странице, СРАЗУ ПОСЛЕ styles.css.
   В проде — лучше встроить эти значения прямо в styles.css :root.
   ────────────────────────────────────────────────────────────────────
   КАК РАБОТАЕТ:
   • html font-size — чистый vw → истинный зум (без +px). 100% (16px)
     достигается на «ширине макета» 1520px. clamp держит ПОТОЛОК 16px
     (≥1520px шрифт замирает на 100%, а контейнер расширяется до 1800px —
     широкоформат) и ПОЛ 12.25px (= body ровно 13px; ≤1162px текст
     перестаёт мельчать).
   • Контейнер и поля — в rem → ширина колонки масштабируется вместе со
     шрифтом, поэтому ПЕРЕНОСЫ СТРОК не меняются при зуме.

   НАСТРОЙКА:
   • размер всего сайта — только строка html{font-size};
   • «ширина макета» (где 100%) — число 1520 в 1.0526vw (коэф=16/ширина*100);
   • нижний предел — пол clamp: флор_root = желаемый_body / 1.0625;
   • макс. ширина — 112.5rem (1800px) в --container.

   В px НАМЕРЕННО оставляем: border/outline, box-shadow, пороги @media,
   stroke в SVG. Всё остальное — в rem.
   ════════════════════════════════════════════════════════════════════ */

html{
  font-size: clamp(12.25px, 1.0526vw, 16px);   /* 100% на 1520 · body-пол 13px */
}
body{ font-size: var(--fs-md); }

:root{
  /* типографика → rem (база 16px) */
  --fs-2xs: 0.6875rem;   /* 11 */
  --fs-xs:  0.875rem;    /* 14 */
  --fs-sm:  0.9375rem;   /* 15 */
  --fs-md:  1.0625rem;   /* 17 */
  --fs-lg:  1.25rem;     /* 20 */
  --fs-xl:  1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;    /* 30 */
  --fs-3xl: 2.375rem;    /* 38 */
  --fs-card-title: var(--fs-2xl);

  /* радиусы → rem (pill оставляем абсолютным) */
  --r-sm: 0.625rem;      /* 10 */
  --r-md: 1rem;          /* 16 */
  --r-lg: 1.5rem;        /* 24 */
  --r-xl: 2rem;          /* 32 */

  /* раскладка → rem. 112.5rem = 1800px (макс. ширина), поля по 2.5rem = 40px */
  --gutter: 2.5rem;
  --container: min(112.5rem, calc(100vw - 2 * var(--gutter)));
  --u-section-pad: 5rem;                              /* 80 */
}

/* Мобайл: возвращаем корень к нормальному кеглю (иначе rem-токены
   унаследуют минимум). Раскладку дальше правят брейкпоинты страниц. */
@media (max-width: 680px){
  html{ font-size: 100%; }              /* 16px база — обычная моб. типографика */
  :root{ --container: 100vw; --gutter: 1.25rem; }
}

/* ── Сайт-каркас (header / footer) — ключевые размеры в rem ────────── */
.u-header__inner{ height: 4.5rem; }            /* 72 */
.u-logo{ font-size: 1.5rem; }
.u-nav{ gap: 2rem; font-size: 0.9375rem; }
.u-btn{ font-size: 0.9375rem; padding: 0.625rem 1.125rem; border-radius: var(--r-pill); }
.u-btn--lg{ font-size: var(--fs-md); padding: 0.875rem 1.5rem; }