/* =====================================================================
   ГК «Дело» — токены дизайн-системы
   Источник истины: _source/Delo_Brandbook_p62-142.pdf (разд. 4–9, стр. 62–142; не отдаётся).
   Спецификация: design-system.md
   Премиальная гамма (кобальт + фольга) не включена — material-brand only.
   ===================================================================== */

:root {
  /* ── Фирменная гамма (разд. 4.1, стр. 64) ──────────────────────── */
  --c-blue:   #072FA0;  /* глубокий морской синий — основной цвет */
  --c-red:    #E40032;  /* акцентный красный — только точечно */
  --c-gray:   #D8D9DD;  /* металлический серый — разделители, фоны */
  --c-white:  #FFFFFF;  /* парусный белый */

  /* ── Веб UI-Kit. Функциональные цвета (разд. 9, стр. 126) ──────── */
  --c-black:    #030429;              /* блоки текста (новости), затемнение фото */
  --c-bg:       #EDEFF4;              /* фон блока/секции */
  --c-blue-30:  rgba(7, 47, 160, .30);    /* неактивный элемент UI */
  --c-white-50: rgba(255, 255, 255, .50); /* неактивный элемент UI */

  /* ── Дополнительная гамма для инфографики (разд. 4.3, стр. 66) ──
     Каждый цвет используется с тонами 10–100%. Только графики/декор. */
  --info-blue:   #072FA0;
  --info-red:    #E40032;
  --info-gray:   #4C4C4B;
  --info-sky:    #3F8EFC;
  --info-steel:  #7192B3;
  --info-orange: #E58B29;
  --info-green:  #099160;

  /* ── Семантические алиасы (рекомендуемый слой) ─────────────────── */
  --bg-default:        var(--c-bg);
  --bg-elevated:       var(--c-white);
  --bg-inverse:        var(--c-blue);
  --text-primary:      var(--c-black);
  --text-secondary:    #4C4C4B;
  --text-on-inverse:   var(--c-white);
  --interactive:       var(--c-blue);
  --interactive-press: var(--c-black);
  --accent:            var(--c-red);
  --border-default:    var(--c-gray);
  --focus-ring:        var(--c-blue);

  /* ── Типографика (разд. 5 / 9, стр. 70–75, 125) ───────────────── */
  --font-brand:  "TT Fors", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-system: Arial, "Helvetica Neue", sans-serif;

  /* Размеры — веб-адаптация шкалы брендбука (1920px-макет → responsive) */
  --text-h1:      clamp(2.5rem, 6vw, 5rem);    /* H1 Title   / lh .86 / -.03em */
  --text-num:     clamp(2.5rem, 5vw, 4.5rem);  /* N Num      / lh .80 / -.03em */
  --text-h2:      clamp(2rem, 4vw, 3.25rem);   /* H2 Lead    / lh 1.0 / -.02em */
  --text-numdate: 2.5rem;                       /* Nd NumDate / lh .80 / -.03em */
  --text-h3:      2rem;                          /* H3 Header  / lh 1.0 / -.02em */
  --text-h4:      1.5rem;                         /* H4 Subhead / lh 1.0 / -.02em */
  --text-h4s:     1.5rem;                         /* H4s Subhead S / lh 1.1 / 0 */
  --text-body:    1.25rem;                        /* B1 Body    / lh 1.3 / 0 */
  --text-caption: 1.125rem;                       /* C1 Caption / lh 1.3 / 0 */

  /* Интерлиньяж */
  --lh-h1:   0.86;
  --lh-num:  0.80;
  --lh-flat: 1.0;
  --lh-snug: 1.1;
  --lh-base: 1.3;

  /* Трекинг */
  --ls-tight:  -0.03em;   /* H1 / Num / NumDate */
  --ls-tight2: -0.02em;   /* H2 / H3 / H4 */
  --ls-zero:   0;

  /* ── Сетка / пространство (разд. 9, стр. 121–123) ─────────────── */
  --grid-cols:     12;
  --grid-gutter:   15px;    /* внутренний отступ колонок (десктоп) */
  --container-pad: 100px;   /* боковые поля макета (десктоп) */
  --block-gap:     150px;   /* вертикаль между смысловыми блоками */
  --card-pad:      30px;    /* шаг отступов внутри карточек */
  --container-max: 1720px;  /* 1920 − 2×100 боковых полей */

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-7: 32px;  --space-8: 40px;
  --space-10: 48px; --space-12: 64px; --space-14: 96px; --space-16: 128px;
  --space-20: 160px;

  /* ── Кнопки (разд. 9, стр. 127) ───────────────────────────────── */
  --btn-height:  58px;
  --btn-pad-x:   17px;   /* = 1/2 вписанной окружности */
  --btn-icon:    24px;
  --underline-w: 2px;    /* подчёркивание меню / линия таймера */

  /* ── Графический элемент (разд. 6.2, стр. 82; формат 1080×1920) ── */
  --line-main:        8px;   /* главная (красная) ≈ 0.7–0.8% от меньшей стороны */
  --line-secondary:   3px;   /* второстепенная (синяя/белая) ≈ 0.2–0.3% */
  --footer-line-main: 3px;   /* подвал, стр. 139 */
  --footer-line-sec:  1px;

  /* ── Радиусы ──────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ── Тени (прохладный подтон #030429) ─────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(3, 4, 41, .08);
  --shadow-md: 0 4px 16px rgba(3, 4, 41, .10);
  --shadow-lg: 0 12px 32px rgba(3, 4, 41, .14);
  --shadow-card-hover: 0 16px 40px rgba(3, 4, 41, .18);

  /* ── Движение (разд. 9, стр. 128, 132) ────────────────────────── */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);  /* ускорение в начале, замедление в конце */
  --dur-fast:  150ms;
  --dur-card:  300ms;   /* смена карточек «О компании» */
  --dur-timer: 2000ms;  /* кнопка-таймер / автосмена карточек */
}

/* ── Брейкпоинты (для справки; в CSS используйте @media) ───────────
   --bp-sm: 640px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px;
   На < 1024px gutter/боковые поля уменьшаются (см. адаптив ниже).      */

/* =====================================================================
   Базовые утилиты и компоненты (по спецификации брендбука)
   ===================================================================== */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (max-width: 1023px) { .container { padding-inline: var(--space-6); } }

/* Сетка 12 колонок, gutter 15px (стр. 121) */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gutter);
}
/* Деление экрана на 2 блока по 6 колонок (стр. 122) */
.col-6 { grid-column: span 6; }
@media (max-width: 767px) { .col-6 { grid-column: 1 / -1; } }

/* Вертикальный ритм между смысловыми блоками — 150px (стр. 123) */
.block + .block { margin-top: var(--block-gap); }
@media (max-width: 767px) { .block + .block { margin-top: var(--space-16); } }

/* ── Типографика ─────────────────────────────────────────────────── */
.t-h1 {
  font: var(--text-h1)/var(--lh-h1) var(--font-brand);
  font-weight: 600; letter-spacing: var(--ls-tight);
}
.t-num {
  font: var(--text-num)/var(--lh-num) var(--font-brand);
  font-weight: 400; letter-spacing: var(--ls-tight);
}
.t-h2 {
  font: var(--text-h2)/var(--lh-flat) var(--font-brand);
  font-weight: 600; letter-spacing: var(--ls-tight2);
}
.t-h3 {
  font: var(--text-h3)/var(--lh-flat) var(--font-brand);
  font-weight: 600; letter-spacing: var(--ls-tight2);
}
.t-h4 {
  font: var(--text-h4)/var(--lh-flat) var(--font-brand);
  font-weight: 600; letter-spacing: var(--ls-tight2);
}
.t-body    { font: var(--text-body)/var(--lh-base) var(--font-brand); font-weight: 400; }
.t-caption { font: var(--text-caption)/var(--lh-base) var(--font-brand); font-weight: 400; }
/* Подзаголовки/выделения данных — ПРОПИСНЫЕ (разд. 5.1, стр. 70) */
.t-overline { text-transform: uppercase; letter-spacing: .04em; }

/* ── Кнопки (стр. 127–128) ──────────────────────────────────────────
   3 типа: округлая с обводкой (58px), с подчёркиванием (меню),
   без обводки (возврат). Текст = B1 Body, иконки = 24px.            */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  height: var(--btn-height);
  padding-inline: var(--btn-pad-x);
  border: 1px solid var(--c-blue);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-blue);
  font: 400 var(--text-body)/1 var(--font-brand);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover  { background: var(--c-blue);  color: var(--c-white); }  /* при наведении — синяя заливка */
.btn:active { background: var(--c-black); color: var(--c-white); border-color: var(--c-black); } /* при нажатии — чёрная */
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.btn .icon { width: var(--btn-icon); height: var(--btn-icon); flex: none; }

/* Круглая кнопка с иконкой (все паддинги 17px) */
.btn--round {
  width: var(--btn-height); height: var(--btn-height);
  padding: var(--btn-pad-x); justify-content: center; gap: 0;
}

/* Кнопка-таймер: красная линия 2px заполняется за 2с (стр. 128) */
.btn--timer { position: relative; overflow: hidden; }
.btn--timer::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: var(--underline-w);
  background: var(--c-red); transform: scaleX(0); transform-origin: left;
}
.btn--timer.is-running::after {
  animation: btn-timer var(--dur-timer) linear forwards;
}
@keyframes btn-timer { to { transform: scaleX(1); } }

/* Кнопка в меню — подчёркивание красным при наведении (стр. 128) */
.btn--menu {
  height: auto; padding: 0; border: 0; border-radius: 0;
  background: none; color: var(--c-blue); position: relative;
}
.btn--menu::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: var(--underline-w); background: var(--c-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn--menu:hover { background: none; color: var(--c-blue); }
.btn--menu:hover::after,
.btn--menu[aria-current]::after { transform: scaleX(1); }

/* Кнопка возврата в раздел: «← B1 Body text», без обводки (стр. 127) */
.btn--back {
  height: auto; padding: 0; gap: 10px; border: 0; border-radius: 0;
  background: none; color: var(--c-blue);
}
.btn--back:hover { background: none; color: var(--c-black); }

/* ── Фирменный графический элемент: линия (разд. 6) ──────────────── */
.accent-line {            /* главная (красная) */
  display: block; width: 64px; height: var(--line-main);
  background: var(--c-red);
  transform-origin: bottom left;
  transition: transform var(--dur-card) var(--ease-out);
}
.accent-line--secondary { /* второстепенная (синяя/белая), тоньше */
  height: var(--line-secondary); background: var(--c-blue);
}

/* ── Карточка ───────────────────────────────────────────────────── */
.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--card-pad);
  overflow: hidden;
  transition: transform var(--dur-card) var(--ease-out),
              box-shadow var(--dur-card) var(--ease-out);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* Карточка новости: серая линия снизу → красная при наведении (стр. 136) */
.news-item { border-bottom: 2px solid var(--c-gray); transition: border-color var(--dur-fast) var(--ease-out); }
.news-item:hover { border-bottom-color: var(--c-red); }

/* ── Блок «Дело в цифрах»: число красным на синем (стр. 134) ─────── */
.stat { font: 400 var(--text-num)/var(--lh-num) var(--font-brand); color: var(--c-red); letter-spacing: var(--ls-tight); }
.stat__label { font: 400 var(--text-caption)/var(--lh-base) var(--font-brand); color: var(--c-white); }

/* ── Секции на фирменном фоне ───────────────────────────────────── */
.section        { padding-block: var(--space-14); }
.section--blue  { background: var(--c-blue);  color: var(--c-white); }
.section--bg    { background: var(--c-bg); }
@media (max-width: 767px) { .section { padding-block: var(--space-12); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}