/* =============================================================
   Финансовый директор · Контрагенты — Design Tokens
   Все переменные дизайн-системы (цвета, типографика, формы)
   Подключение:  <link rel="stylesheet" href="tokens.css">
   ============================================================= */

:root {

  /* ----------------------------------------------------------
     ЦВЕТА · Бренд
     ---------------------------------------------------------- */
  --color-orange:        #FF6A00;   /* логотип, шестерёнки, активные иконки */
  --color-accent:        #E8552D;   /* активный пункт, акцентные ссылки     */

  /* ----------------------------------------------------------
     ЦВЕТА · Семантика
     ---------------------------------------------------------- */
  --color-risk:          #E0301E;   /* факторы риска, ошибки                */
  --color-success:       #16A24A;   /* надёжность, «моя компания»          */
  --color-link:          #2680EB;   /* ссылки, данные, графики             */
  --color-warning:       #E8852B;   /* наблюдения, предупреждения          */

  /* ----------------------------------------------------------
     ЦВЕТА · Нейтральные
     ---------------------------------------------------------- */
  --color-ink:           #191B1E;   /* основной текст / заголовки          */
  --color-text:          #5B6066;   /* вторичный текст                     */
  --color-caption:       #9AA0A6;   /* подписи, плейсхолдеры               */
  --color-muted:         #7A7F85;   /* приглушённый текст в карточках      */
  --color-white:         #FFFFFF;
  --color-cream:         #F3F1ED;   /* карточка контрагента, промо-полосы  */
  --color-canvas:        #FBFAF8;   /* фон примеров / панелей              */
  --color-sidebar:       #FAF8F5;   /* фон бокового меню                   */
  --color-line:          #E6E3DD;   /* разделители                         */
  --color-border:        #ECE8E1;   /* обводки карточек                    */
  --color-pill-dark:     #3D4450;   /* тёмная плашка пользователя          */

  /* ----------------------------------------------------------
     ЦВЕТА · Поверхности кнопок / термины
     ---------------------------------------------------------- */
  --color-btn-cream:     #F0EDE7;   /* промо-полоса                        */
  --color-btn-soft:      #EEECE7;   /* кнопка скачивания                   */
  --color-btn-border:    #E6E2DA;
  --color-term-bg:       #EFEDE8;   /* подсветка термина в тексте          */
  --color-tint-accent:   rgba(232, 85, 45, .10);  /* фон активного пункта  */

  /* ----------------------------------------------------------
     ЦВЕТА · Теги / факторы (обводка + текст)
     ---------------------------------------------------------- */
  --chip-risk-border:    #E0301E;
  --chip-risk-text:      #D32C1C;
  --chip-success-border: #2FA85A;
  --chip-success-text:   #16903F;
  --chip-warning-border: #E8A24B;
  --chip-warning-text:   #C97A13;
  --chip-neutral-border: #D7D3CA;
  --chip-neutral-text:   #3A3F45;

  /* ----------------------------------------------------------
     ЦВЕТА · Шкала риска (7 ступеней)
     ---------------------------------------------------------- */
  --risk-1: #1F9D55;   /*  1 – 15  надёжный        */
  --risk-2: #52B65F;   /* 16 – 30                  */
  --risk-3: #F2C200;   /* 31 – 50                  */
  --risk-4: #F0883E;   /* 51 – 70                  */
  --risk-5: #E8553A;   /* 71 – 85                  */
  --risk-6: #D63A2E;   /* 86 – 100  высокий риск   */
  --risk-7: #C9C5BC;   /* нет данных               */

  /* ----------------------------------------------------------
     ЦВЕТА · Графики
     ---------------------------------------------------------- */
  --chart-blue:        #2680EB;
  --chart-blue-fill:   rgba(38, 128, 235, .12);
  --chart-green:       #21A24A;
  --chart-green-fill:  rgba(22, 162, 74, .13);
  --chart-grid:        #F0EDE7;
  --chart-avg:         #B8B4AB;   /* пунктир «средняя по отрасли»          */

  /* ----------------------------------------------------------
     ЦВЕТА · Баннер риска (зелёный градиент)
     ---------------------------------------------------------- */
  --banner-success-from: #1AA046;
  --banner-success-to:   #159A41;

  /* ----------------------------------------------------------
     ТИПОГРАФИКА · Гарнитуры
     ---------------------------------------------------------- */
  --font-sans: 'Graphik', 'Golos Text', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ----------------------------------------------------------
     ТИПОГРАФИКА · Кегли
     ---------------------------------------------------------- */
  --text-display: 48px;   /* обложка                 */
  --text-h1:      34px;   /* название компании       */
  --text-h2:      32px;   /* заголовок раздела       */
  --text-h2-sm:   24px;   /* заголовок блока         */
  --text-h3:      18px;   /* подзаголовок            */
  --text-lead:    16px;   /* тело + жирный ввод      */
  --text-body:    16px;
  --text-sm:      15px;
  --text-sm-2:    14px;
  --text-caption: 13px;   /* легенды, подписи        */
  --text-micro:   12px;   /* mono-метки              */
  --text-label:   11px;   /* mono ВЕРХНИЙ РЕГИСТР     */

  /* ----------------------------------------------------------
     ТИПОГРАФИКА · Насыщенность
     ---------------------------------------------------------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ----------------------------------------------------------
     ТИПОГРАФИКА · Интерлиньяж и трекинг
     ---------------------------------------------------------- */
  --lh-tight:   1.05;   /* крупные заголовки  */
  --lh-heading: 1.2;
  --lh-body:    1.6;
  --lh-prose:   1.62;

  --ls-tightest: -.025em;
  --ls-tight:    -.02em;
  --ls-snug:     -.01em;
  --ls-wide:      .06em;   /* mono-подписи     */
  --ls-wider:     .08em;
  --ls-widest:    .1em;    /* группы меню      */

  /* ----------------------------------------------------------
     ФОРМЫ · Скругления
     ---------------------------------------------------------- */
  --radius-xs:   6px;    /* подсветка термина        */
  --radius-sm:   8px;    /* пункт меню               */
  --radius-md:   10px;   /* кнопки                   */
  --radius-lg:   12px;   /* свотчи, баннер           */
  --radius-xl:   14px;   /* карточки статистики      */
  --radius-2xl:  16px;   /* панели примеров          */
  --radius-3xl:  18px;   /* карточка контрагента     */
  --radius-pill: 999px;  /* теги / факторы           */

  /* ----------------------------------------------------------
     ФОРМЫ · Обводки
     ---------------------------------------------------------- */
  --border-width: 1px;
  --chip-border-width: 1px;
  --bar-cap-width: 3px;   /* верхняя линия столбца графика */

  /* ----------------------------------------------------------
     РАЗМЕРЫ · Каркас
     ---------------------------------------------------------- */
  --sidebar-width:   268px;
  --content-max:     1280px;
  --content-pad-y:   64px;
  --content-pad-x:   72px;

  /* ----------------------------------------------------------
     ШАГ · Отступы (4-px сетка)
     ---------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 84px;   /* интервал между разделами */
}