/* ============================================================================
   Hoffmann Systems — дизайн-токены сайта
   Версия 1.0 · 22.08.2026 · направление A (Archivo)

   Подключение:
     <link rel="stylesheet" href="/assets/hoffmann-tokens.css">
   Файл шрифта положить рядом: /assets/archivo-var.woff2
   ========================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;          /* ось wght */
  font-stretch: 62% 125%;        /* ось wdth */
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- шрифт ------------------------------------------------------------ */
  --hs-font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  /* --- фирменные цвета --------------------------------------------------- */
  --hs-red:    #D6121B;   /* акцент: кнопки, активный пункт, предупреждения */
  --hs-silver: #C0C0C0;   /* знак и надпись на тёмном */
  --hs-dark:   #262626;   /* тёмные секции */
  --hs-black:  #000000;   /* знак и надпись на светлом */

  /* --- нейтрали интерфейса ----------------------------------------------
     Это не фирменные цвета, а рабочая шкала для текста и границ,
     выведенная из #262626. В брендбук не попадают. */
  --hs-ink:      #16181A;  /* основной текст */
  --hs-ink-2:    #42474C;  /* вторичный текст */
  --hs-muted:    #7B8087;  /* подписи, метки */
  --hs-line:     #E1E4E6;  /* границы таблиц и карточек */
  --hs-line-2:   #EEF0F1;  /* внутренние линии таблиц */
  --hs-surface:  #F4F5F6;  /* фон секции */
  --hs-white:    #FFFFFF;

  --hs-red-hover: #B00E16; /* кнопка при наведении */

  /* --- шкала кеглей ------------------------------------------------------ */
  --hs-size-display: 64px;
  --hs-size-h1:      44px;
  --hs-size-h2:      34px;
  --hs-size-h3:      22px;
  --hs-size-lead:    19px;
  --hs-size-body:    16px;
  --hs-size-small:   14px;
  --hs-size-label:   11px;

  /* --- ширина по оси wdth ------------------------------------------------ */
  --hs-wdth-display: 122%;
  --hs-wdth-head:    118%;
  --hs-wdth-sub:     112%;
  --hs-wdth-ui:      108%;
  --hs-wdth-text:    100%;

  /* --- интерлиньяж ------------------------------------------------------- */
  --hs-lh-display: 0.98;
  --hs-lh-head:    1.10;
  --hs-lh-sub:     1.25;
  --hs-lh-text:    1.62;
  --hs-lh-tight:   1.45;

  /* --- ритм -------------------------------------------------------------- */
  --hs-space-1: 4px;   --hs-space-2: 8px;   --hs-space-3: 12px;
  --hs-space-4: 16px;  --hs-space-5: 24px;  --hs-space-6: 32px;
  --hs-space-7: 48px;  --hs-space-8: 64px;  --hs-space-9: 96px;

  --hs-radius: 2px;
  --hs-measure: 66ch;   /* предельная длина строки текста */
}

/* --- немецкая версия -------------------------------------------------------
   Длинные составные слова не помещаются в широкое жирное начертание.
   Заголовки идут на ступень меньше и уже по оси ширины. */
:root:lang(de), [lang='de'] {
  --hs-size-display: 52px;
  --hs-size-h1:      38px;
  --hs-size-h2:      30px;
  --hs-wdth-display: 110%;
  --hs-wdth-head:    108%;
  --hs-wdth-sub:     104%;
}

/* ============================================================================
   Роли
   ========================================================================= */

body {
  font-family: var(--hs-font);
  font-size: var(--hs-size-body);
  font-weight: 400;
  font-stretch: var(--hs-wdth-text);
  line-height: var(--hs-lh-text);
  color: var(--hs-ink-2);
  -webkit-font-smoothing: antialiased;
}

.hs-display, h1 {
  font-size: var(--hs-size-display);
  font-weight: 800;
  font-stretch: var(--hs-wdth-display);
  line-height: var(--hs-lh-display);
  letter-spacing: -0.015em;
  color: var(--hs-ink);
}

h2, .hs-h2 {
  font-size: var(--hs-size-h2);
  font-weight: 800;
  font-stretch: var(--hs-wdth-head);
  line-height: var(--hs-lh-head);
  letter-spacing: -0.010em;
  color: var(--hs-ink);
}

h3, .hs-h3 {
  font-size: var(--hs-size-h3);
  font-weight: 700;
  font-stretch: var(--hs-wdth-sub);
  line-height: var(--hs-lh-sub);
  letter-spacing: -0.005em;
  color: var(--hs-ink);
}

.hs-lead {
  font-size: var(--hs-size-lead);
  line-height: var(--hs-lh-tight);
  color: var(--hs-ink-2);
  max-width: var(--hs-measure);
}

p { max-width: var(--hs-measure); }

.hs-small { font-size: var(--hs-size-small); line-height: var(--hs-lh-tight); }

/* надзаголовок и метки */
.hs-label {
  font-size: var(--hs-size-label);
  font-weight: 600;
  font-stretch: var(--hs-wdth-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hs-muted);
}

/* меню и элементы интерфейса */
.hs-nav, .hs-ui {
  font-size: 15px;
  font-weight: 600;
  font-stretch: var(--hs-wdth-ui);
  letter-spacing: 0.02em;
  color: var(--hs-ink);
}

/* ============================================================================
   Кнопки
   ========================================================================= */

.hs-btn {
  display: inline-block;
  font: inherit;
  font-size: var(--hs-size-small);
  font-weight: 600;
  font-stretch: var(--hs-wdth-ui);
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--hs-radius);
  cursor: pointer;
  text-decoration: none;
}
.hs-btn--primary { background: var(--hs-red); color: var(--hs-white); }
.hs-btn--primary:hover { background: var(--hs-red-hover); }
.hs-btn--ghost {
  background: transparent; color: var(--hs-ink);
  box-shadow: inset 0 0 0 1px var(--hs-line);
}

/* На тёмных секциях акцент делаем серебром: красный на #262626 даёт
   контраст 2.85 и не читается. */
.hs-on-dark .hs-btn--primary { background: var(--hs-silver); color: var(--hs-black); }
.hs-on-dark { color: var(--hs-silver); background: var(--hs-dark); }
.hs-on-dark h1, .hs-on-dark h2, .hs-on-dark h3 { color: var(--hs-white); }

/* ============================================================================
   Таблицы спецификаций
   Табличные цифры обязательны: в Archivo знаки по умолчанию расходятся
   на 1–2 единицы из 1000, колонки kN и MOQ уходят из вертикали.
   ========================================================================= */

.hs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--hs-size-small);
  font-stretch: var(--hs-wdth-text);
  color: var(--hs-ink);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;   /* подстраховка для старых браузеров */
}
.hs-table th {
  font-size: var(--hs-size-label);
  font-weight: 600;
  font-stretch: var(--hs-wdth-ui);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--hs-muted);
  text-align: left;
  border-bottom: 1px solid var(--hs-line);
  padding: 0 var(--hs-space-5) var(--hs-space-2) 0;
}
.hs-table td {
  padding: var(--hs-space-3) var(--hs-space-5) var(--hs-space-3) 0;
  border-bottom: 1px solid var(--hs-line-2);
}
.hs-table td:last-child, .hs-table th:last-child { padding-right: 0; }
/* числовые колонки прижимаем вправо — так разряды совпадают */
.hs-table .hs-num { text-align: right; font-variant-numeric: tabular-nums; }

/* любое число, которое стоит в колонке или сравнивается */
.hs-num, .hs-price, .hs-spec { font-variant-numeric: tabular-nums lining-nums; }

/* ============================================================================
   Логотип
   Замок шириной до 300 px — компактная версия, шире — мастер.
   Обе версии в одном макете рядом не ставить.
   ========================================================================= */

.hs-logo { display: block; height: 34px; width: auto; color: var(--hs-black); }
.hs-on-dark .hs-logo { color: var(--hs-white); }
/* логотип красным не красим никогда */