/* tokens.css - единственный источник цветов, размеров и отступов.
 * В app.css и в шаблонах не должно быть ни литеральных цветов, ни
 * «магических» пикселей - только переменные отсюда.
 *
 * Значения - те же, что у Production Hub (studio/static/tokens.css), чтобы
 * две панели выглядели родственно. Взяты только те, что студии уже нужны.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* --- поверхности: ровно три уровня плюс шапка ------------------------ */
  --bg:            #0A0E14;   /* фон страницы */
  --bg-panel:      #0E141C;   /* карточка, панель */
  --bg-raised:     #131B24;   /* поле ввода, активный пункт */
  --bg-topbar:     #0C1219;   /* верхняя полоса */

  --border:        #202A38;   /* видимая граница */
  --border-soft:   #1A2330;   /* волосяная линия внутри блока */

  /* --- текст: ровно три уровня ---------------------------------------- */
  --text:          #E4EBF2;
  --text-muted:    #94A3B4;
  --text-faint:    #64748B;

  /* --- акцент ---------------------------------------------------------- */
  --accent:        #35C2D6;
  --accent-ink:    #06171C;   /* текст поверх акцентной заливки */
  --accent-wash:   #0F2A31;
  --accent-line:   #2A4A52;

  /* --- смысловые цвета. Только по смыслу, не как украшение ------------- */
  --ok:            #4FCFA3;  --ok-wash:      #0E2A22;  --ok-line:      #1D4437;
  --pending:       #E0A860;  --pending-wash: #1E1810;  --pending-line: #3A2E1C;
  --fail:          #E8788A;  --fail-wash:    #24151A;  --fail-line:    #4A2730;

  /* --- шрифты ---------------------------------------------------------- */
  --font-ui:   "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- шкала текста ---------------------------------------------------- */
  --t-label:    11px;   /* моноширинная подпись группы, ЗАГЛАВНЫМИ */
  --t-xs:       12px;   /* числа, счётчики */
  --t-sm:       13px;   /* подсказка под полем, вторая строка */
  --t-body:     15px;   /* основной текст */
  --t-h2:       18px;   /* заголовок блока */
  --t-h1:       22px;   /* заголовок раздела на странице */
  --t-display:  30px;   /* заголовок страницы */

  --lh-tight:   1.2;
  --lh:         1.55;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;

  --track-label: 0.14em;  /* разрядка у подписей заглавными */
  --track-tight: -0.02em; /* поджатие у крупных заголовков */

  /* --- отступы: шаг 4 --------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  /* --- две левые линии, от которых выравнивается всё -------------------- */
  --gutter:      26px;  /* содержимое страницы */
  --gutter-nav:  16px;  /* боковая колонка: логотип, иконки, подписи групп */

  /* Плашка активного пункта отодвинута от края колонки на --space-2, поэтому
     собственный отступ пункта - разница. */
  --nav-inset:   calc(var(--gutter-nav) - var(--space-2));

  /* --- радиусы ---------------------------------------------------------- */
  --radius:     6px;
  --radius-lg:  8px;

  /* --- каркас ----------------------------------------------------------- */
  --sidebar-width: 216px;
  --topbar-height:  56px;
  --page-width:   1280px;  /* содержимое рядом с боковой колонкой */
  --read-width:    940px;  /* предел ширины для текста */
  --field-width:   360px;  /* поле ввода в форме, карточка входа */
  --status-width:  6.5rem; /* плашка состояния на «Проверке» */

  --logo-size:     24px;  /* квадрат со знаком в шапке */
  --icon:          16px;  /* иконка пункта меню */
  --stroke-icon:    1.7;  /* обводка иконок: одна на весь набор */
}