/* Шрифт сайта и редакторов — один. Подключается здесь, а не в
   main.css: variables.css стоит первым на каждой странице, включая
   iframe'ы инструментов (карта, ноды, UI, чат), у которых main.css
   нет — без этого редакторы падали в системный «Segoe UI». */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* === Typography ===
       Единственное место, где назван шрифт. Сайт (main.css) берёт
       --font для body, редакторы — через --tk-font в tool_kit.css.
       Моноширинный — для путей, id и кода. */
    --font:      "Roboto", "Segoe UI", Arial, sans-serif;
    --font-mono: "Consolas", "Menlo", ui-monospace, monospace;

    /* === Layout ===
       Высота шапки сайта (.menu в main.css). Одна на все страницы,
       включая админку: кто считает отступ от шапки — берёт отсюда. */
    --site-header-h: 60px;

    /* Высота всех кнопок на страницах сайта и в админке. Редакторы
       (инструменты) живут на своей --tk-control-h из tool_kit.css. */
    --site-control-h: 36px;

    /* === Палитра проекта ===
       Источник: дизайн-палитра (System / Layers / Typography /
       Additional / Gradient). Тёмная тема собрана на «Layers → Dark».
       ------------------------------------------------------------
       System      Corporate #008FEC · XP #9013FE · Warning #FC4D64
                   Success #3EBD41 · Attention #F3AD38
       Layers      basement #10131A → background #141820 → first
                   #1A212D → second #1D2736 → third #212D3F
       Typography  text light #F6F7F8 · text dark #080808
       Additional  категориальные цвета: метки, порты нод, графики
       Gradient    XP → Corporate
       ------------------------------------------------------------
       Чего в палитре нет и что выведено из неё:
         --layer-4 / --layer-5 — две ступени той же лестницы над
           «third»: hover-поверхности и бордеры;
         --text-mute — «Light basement» палитры, вторичный текст;
         --text-dim  — приглушённый текст, ≈4.7:1 к фону. */

    /* --- System: акценты --- */
    --color-corporate: #008fec;
    --color-xp:        #9013fe;
    --color-warning:   #fc4d64;
    --color-success:   #3ebd41;
    --color-attention: #f3ad38;

    /* --- Gradient: фирменный градиент --- кнопки, кружок «играть»,
       заглушка аватара, чип категории, знак логотипа. Сменил
       XP → Corporate из дизайн-палитры; static/img/favicon.svg
       повторяет его в hex. */
    --gradient-brand:  linear-gradient(135deg, var(--color-xp), var(--color-violet));

    /* --- Layers: поверхности снизу вверх --- */
    --layer-basement:  #10131a;
    --layer-bg:        #141820;
    --layer-1:         #1a212d;
    --layer-2:         #1d2736;
    --layer-3:         #212d3f;
    --layer-4:         #283549;   /* производный: hover, мягкие бордеры */
    --layer-5:         #2e3d55;   /* производный: бордеры, приподнятые элементы */

    /* --- Typography --- */
    --text-light:      #f6f7f8;
    --text-mute:       #b6bbcc;
    --text-dim:        #7c8394;   /* производный */
    --text-dark:       #080808;

    /* --- Additional: категориальные цвета --- */
    --color-light-yellow: #f0df47;
    --color-dark-orange:  #e88021;
    --color-redish:       #d03f3f;
    --color-pink:         #cd317c;
    --color-violet:       #6227e0;
    --color-dark-blue:    #2264e3;
    --color-light-blue:   #27b4e0;
    --color-aquamarine:   #27e087;
    --color-dark-green:   #139520;
    --color-gray:         #646464;

    /* --- Имена прошлой палитры ---
       На них написан весь существующий CSS; значения переведены на
       токены выше. «magenta» теперь Corporate (синий): вторая
       акцентная краска и хвост градиента XP → Corporate. Новые
       правила пишем на новых токенах. */
    --color-black:      var(--layer-basement);
    --color-dark-grey:  var(--layer-5);
    --color-light-grey: var(--text-mute);
    --color-slate:      var(--text-dim);
    --color-red-pink:   var(--color-warning);
    --color-magenta:    var(--color-corporate);
    --color-purple:     var(--color-xp);

    --text-white:        var(--text-light);
    --text-light-grey:   var(--text-mute);
    --text-grey:         var(--text-dim);
    --text-blue:         var(--color-corporate);
    --text-green:        var(--color-success);
    --text-light-orange: var(--color-attention);
    --text-orange:       var(--color-warning);   /* ошибки, «отменить» */
    --text-purple:       var(--color-xp);
    --text-magenta:      var(--color-corporate);

    --ui-black:          var(--layer-bg);
    --ui-dark-grey:      var(--layer-4);
    --ui-grey:           var(--text-mute);
    --ui-teal:           var(--color-corporate);

    /* --- Графики: категориальные слоты ---
       Цвет серии — по порядку слотов. Порядок и ступени проверены
       валидатором палитры (dataviz, тёмная тема, поверхность --layer-2):
       соседние слоты различимы при протанопии и дейтеранопии (ΔE ≥ 15)
       и при обычном зрении (ΔE ≥ 20), контраст к поверхности ≥ 3:1;
       первые три различимы и все между собой (сегменты пончика).
       Оранжевый, жёлтый и голубой из Additional ярче тёмной полосы
       (OKLCH L > 0.67) — здесь их ступени с L 0.66 при том же тоне.
       Статусные success / warning / attention в серии не идут: они
       значат «хорошо / плохо». Графики — js/admin/dashboard/. */
    --chart-1: var(--color-corporate);
    --chart-2: #da7302;                   /* dark-orange, L 0.66 */
    --chart-3: var(--color-pink);
    --chart-4: #a29508;                   /* light-yellow, L 0.66 */
    --chart-5: #08a1cb;                   /* light-blue, L 0.66 */
    --chart-6: var(--color-dark-green);
    --chart-grid: var(--layer-4);         /* волосок сетки */
    --chart-axis: var(--layer-5);         /* базовая линия */
}