/* ===========================================================================
   И-СЕРВИС · ДИЗАЙН-ТОКЕНЫ
   Источник: «Руководство по использованию фирменного стиля» I_SERVIS_GL_F.pdf
   Разделы 2.17 (цвета), 2.18 (шрифт), 2.5–2.16 (знак, логотип, паттерн),
   5.1–5.3 (web-элементы).

   Файл только объявляет переменные и служебные классы фирменных элементов.
   Он ничего не перекрашивает: чтобы применить палитру к прототипу,
   подключите следом brandbook/css/brand-theme.css.
   =========================================================================== */

:root {
  /* --- 2.17 Фирменные цвета (значения из брендбука) ----------------------- */
  /* PANTONE Orange 021 C · CMYK 0/60/100/0 · RAL 2008 · AVERY 509 EG · ORACAL 036 */
  --brand-orange:      #ED6E00;
  /* PANTONE Bright White · CMYK 0/0/0/0 · RAL 9003 · AVERY 501 EG · ORACAL 10 */
  --brand-white:       #FFFFFF;
  /* PANTONE 877 C · CMYK 0/0/100/0 · RAL 9007 · AVERY 546 EG · ORACAL 090 */
  --brand-grey:        #8F8F8C;
  /* PANTONE Process Black · CMYK 0/0/0/100 · RAL 9005 · AVERY 502 EG · ORACAL 641 070 */
  --brand-black:       #1F1F1F;
  /* Плашки в самом макете брендбука набраны составным чёрным #231F20 —
     для печати, для экрана используем #1F1F1F из спецификации. */
  --brand-black-print: #231F20;

  /* --- Производные оттенки (в брендбуке их нет, нужны для интерфейса) ------ */
  --brand-orange-600:  #D96500;   /* hover                                    */
  --brand-orange-700:  #C45B00;   /* active / pressed                         */
  --brand-orange-ink:  #BA5600;   /* оранжевый текст на белом, контраст 4.75:1 */
  --brand-orange-08:   #FEF6F0;   /* подложка 6 %                              */
  --brand-orange-16:   #FDEEE0;   /* подложка 12 %                             */
  --brand-orange-24:   #FBE2CC;   /* подложка 20 %                             */

  /* --- Нейтральная шкала (серые, реально использованные в брендбуке) ------- */
  --brand-grey-900:    #1F1F1F;
  --brand-grey-800:    #4F4C4D;
  --brand-grey-700:    #656263;
  --brand-grey-500:    #8F8F8C;   /* фирменный серый                          */
  --brand-grey-400:    #A7A5A6;
  --brand-grey-300:    #BDBCBC;
  --brand-grey-200:    #D3D2D2;
  --brand-grey-100:    #E9E9E9;
  --brand-grey-050:    #F6F6F5;

  /* --- 2.18 Фирменный шрифт ----------------------------------------------- */
  /* Основной: Tornado (Thin/Light/Regular/Medium/Bold/Black + Italic).
     Дополнительный: Helios и Helios Cond (Thin/Light/Regular/Bold/Black).
     Оба — коммерческие гарнитуры, веб-лицензия нужна отдельно; ниже стек
     с системными подменами, чтобы вёрстка не «плыла» без файлов шрифтов. */
  --font-display: "Tornado", "Helios", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-text:    "Helios", "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --font-cond:    "Helios Cond", "Helvetica Neue Condensed", "Arial Narrow", var(--font-text);

  --fw-thin: 100; --fw-light: 300; --fw-regular: 400;
  --fw-medium: 500; --fw-bold: 700; --fw-black: 900;

  /* --- Геометрия знака и логотипа (снято с макетов брендбука) ------------- */
  --mark-ratio: 1.27334;          /* ширина / высота знака, 100 : 78.534      */
  --logo-ratio: 3.50043;          /* горизонтальный логотип, 274.89 : 78.533  */
  --logo-status-ratio: 3.42033;   /* логотип + статусная строка              */
  --logo-slogan-ratio: 3.50654;   /* логотип + слоган                        */
  --logo-vertical-ratio: 0.97119; /* вертикальный логотип                    */

  /* Модуль X = 1/4 ширины знака. Зона комфорта — X со всех сторон (2.3, 2.7) */
  --brand-x: .25;

  /* Минимальный размер: знак h = 5 мм (2.4), логотип h = 10 мм (2.8).
     На экране при 96 dpi это ~19 px и ~38 px. */
  --mark-min-h: 19px;
  --logo-min-h: 38px;

  /* --- 5.1–5.3 Web-элементы ----------------------------------------------- */
  --icon-radius-ratio: .184298;   /* радиус скругления / сторона иконки       */
  --icon-mark-ratio:   .642593;   /* ширина знака / сторона иконки (5.1, 5.2) */
  --favicon-mark-ratio: .712385;  /* ширина знака / сторона favicon (5.3)     */

  /* --- 2.16 Фирменный паттерн --------------------------------------------- */
  --pattern-step-x: 200;          /* шаг по X = 2 ширины знака                */
  --pattern-step-y: 157.068;      /* шаг по Y = 2 высоты знака                */
  --pattern-offset: 50;           /* сдвиг соседнего ряда = 1/2 ширины знака  */
  --pattern-stroke: 3.33;         /* толщина обводки = 3.33 % ширины знака    */
  --pattern-size: 160px;          /* размер плитки в вёрстке                  */
}

/* ===========================================================================
   Фирменные элементы
   =========================================================================== */

/* Логотип и знак: задаётся высота, ширина считается из пропорции. */
.brand-logo,
.brand-mark { display: block; height: auto; }

.brand-mark          { width: calc(var(--h, 40px) * var(--mark-ratio)); height: var(--h, 40px); min-height: var(--mark-min-h); }
.brand-logo          { width: calc(var(--h, 40px) * var(--logo-ratio)); height: var(--h, 40px); min-height: var(--logo-min-h); }
.brand-logo--status  { width: calc(var(--h, 40px) * var(--logo-status-ratio)); }
.brand-logo--slogan  { width: calc(var(--h, 40px) * var(--logo-slogan-ratio)); }
.brand-logo--vertical{ width: calc(var(--h, 40px) * var(--logo-vertical-ratio)); }

/* Зона комфорта (2.3, 2.7): X со всех сторон, X = 1/4 ширины знака.
   Для логотипа X считается от высоты знака: X = .25 * h * mark-ratio. */
.brand-clearspace { padding: calc(var(--h, 40px) * var(--mark-ratio) * var(--brand-x)); }

/* Знак и уголок наследуют цвет текста — красьте через color. */
.brand-mark--orange,
.brand-corner--orange { color: var(--brand-orange); }
.brand-mark--white,
.brand-corner--white  { color: var(--brand-white); }
.brand-mark--black,
.brand-corner--black  { color: var(--brand-black); }

/* 2.16 Паттерн: подложка из плитки. */
.brand-pattern {
  background-image: url("../logo/pattern-orange.svg");
  background-repeat: repeat;
  background-size: var(--pattern-size) auto;
}
.brand-pattern--white { background-image: url("../logo/pattern-white.svg"); }

/* Фирменный уголок (графический элемент разделов и рекламных макетов).
   Растягивается по высоте блока, ширина — 47.867 % высоты. */
.brand-corner {
  display: block;
  height: 100%;
  width: auto;
  color: var(--brand-orange);
}

/* Иконки из спрайта. */
.ico-sprite { display: inline-flex; width: 24px; height: 24px; flex: none; }
.ico-sprite svg,
svg.ico-sprite { width: 100%; height: 100%; fill: none; }