/* tokens.css - единственный источник цветов, размеров и отступов.
 * В app.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;

  /* --- полоса стадий ---------------------------------------------------- */
  --stage-done:    #2C5C50;   /* стадия пройдена */
  --stage-idle:    #1A2330;   /* ещё не начиналась */
  --stage-track:   #103038;   /* дорожка под текущей */

  /* --- цвет канала: переопределяется на контейнере --------------------- */
  --ch: var(--accent);

  /* Вес сегмента в полосе стадий - его длительность. Настоящее число приходит
     разметкой, как и цвет канала; здесь стоит умолчание, чтобы полоса без
     весов делилась поровну, а не схлопывалась. */
  --w: 1;

  /* Где стоят ручки ползунка границ - доли от разумных рамок поля. Настоящие
     числа приходят разметкой, как и вес сегмента выше; здесь стоит умолчание,
     чтобы дорожка без ручек была закрашена целиком, а не пустой. */
  --from: 0%;
  --to: 100%;

  /* --- шрифты ---------------------------------------------------------- */
  --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;
  --w-bold:     700;

  --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, поэтому
     собственный отступ пункта - разница. Считается здесь один раз, чтобы
     правка --gutter-nav сама доехала до иконок, а не разошлась с логотипом. */
  --nav-inset:   calc(var(--gutter-nav) - var(--space-2));

  /* --- радиусы ---------------------------------------------------------- */
  --radius-sm:  4px;
  --radius:     6px;
  --radius-lg:  8px;
  --radius-xl: 12px;   /* крупные карточки прогона */

  /* --- высоты контролов -------------------------------------------------- */
  --h-sm: 26px;   /* пилюля в шапке */
  --h:    32px;   /* кнопка, поле */
  --h-lg: 38px;

  /* --- размеры каркаса --------------------------------------------------- */
  --sidebar-width: 216px;
  --topbar-height:  56px;
  --rail-width:    312px;  /* правая колонка на выпуске и пресете */
  --read-width:    940px;  /* предел ширины для форм и текста */
}

/* --- размеры конкретных мест ------------------------------------------
 * Всё выше - шкала: ступени, из которых собирается любой экран. Здесь -
 * мерки отдельных элементов, которые шкалой не выражаются: ширина поля,
 * высота редактора, размер миниатюры. Их место всё равно тут, а не в
 * app.css: правило проекта - никаких чисел в правилах вида.
 */
:root {
  --page-width:    1280px;  /* содержимое рядом с боковой колонкой */
  --field-width:    360px;  /* поле ввода в форме */
  --field-label:    260px;  /* левая зона строки поля: имя и подсказка под ним.
                               Уже - и «Непрозрачность плашки или обводки, %»
                               ломается на четыре строки */
  --select-width:   160px;  /* выпадающий список: уже - и имена каналов
                               обрезаются многоточием */
  --media-width:    640px;  /* картинка превью, проигрыватель */
  --versions-width: 280px;  /* столбик версий рядом с редактором промпта */
  --chart-width:    640px;  /* ниже этого двенадцать столбиков слипаются */
  --chart-height:   120px;  /* столбик недели на «Статистике» */

  --editor-height:    420px;  /* промпт: правят целиком, нужен весь текст */
  --editor-height-md: 300px;  /* описание выпуска: полтора десятка строк */
  --editor-height-sm:  64px;  /* короткий промпт: строки три */

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

  --w-number:      64px;  /* поле или колонка ровно под число */
  --thumb-width:   64px;  /* миниатюра кадра: строки с обложкой и без неё */
  --thumb-height:  32px;  /* стоят одной высоты, поэтому мерка общая */

  --range-thumb:   14px;  /* ручка ползунка границ: мельче - не поймать мышью */
  --range-track:    4px;  /* дорожка под ней */

  --rail:           3px;  /* рельс цвета канала слева у карточки прогона */
  --stage-line:     4px;  /* толщина сегмента в полосе стадий */
  --seg-min:       72px;  /* уже - и слово «Субтитры» под сегментом обрежется */
  --shot-width:    88px;  /* кадр выпуска в списке «вышло за сутки»: 16:9, */
  --shot-height:   50px;  /* поэтому две мерки, а не одна квадратная */
}