/* Токены интерфейса — вся шкала свода правил. Это единственный файл, где стоят числа кеглей, высот,
   отступов, радиусов и цвета: остальные стили ссылаются только на переменные, и сторож это проверяет.

   Бренд сюда не попадает: акцент приходит с сервера (shapka.brand.accent) и ставится переменной
   на корне при первой отрисовке — вторая компания меняет цвет конфигом, а не правкой стилей (задача 6.4). */

:root {
  /* Шкала кеглей. Других кеглей в интерфейсе нет. */
  --kegl-28: 28px;  /* крупное число: итог, сумма периода */
  --kegl-22: 22px;  /* логотип, заголовок экрана */
  --kegl-19: 19px;  /* заголовок блока */
  --kegl-17: 17px;  /* название строки, время, надпись на главной кнопке */
  --kegl-15: 15px;  /* вкладка, вторичная кнопка, чип, проза */
  --kegl-13: 13px;  /* подпись, исход, нижняя навигация, счётчик */
  --kegl-11: 11px;  /* служебный капс — единственное место, где капс допустим */

  /* Веса. 400 и 500 в системном гротеске рисуются одинаково, полужирный — это 600 и выше. */
  --ves-obychnyy: 400;
  --ves-vydelen: 500;
  --ves-zhirnyy: 600;
  --ves-logo: 700;

  /* Пять высот. Если элемент не влезает в эту пятёрку — он спроектирован неправильно. */
  --h-glavnaya: 44px;    /* главная кнопка. Только она */
  --h-upravlenie: 36px;  /* всё остальное управляемое */
  --h-vlozhennyy: 32px;  /* сегмент дорожки, кружок инициалов */
  --h-schetchik: 24px;   /* счётчик — это не кнопка */
  --h-stroka: 52px;      /* минимум строки дела: две текстовые строки внутри */

  /* Шаг отступов: 2 · 4 · 6 · 8 · 12 · 16 · 24 · 32. Значений 10, 14, 18, 20 в шкале нет. */
  --o-2: 2px;
  --o-4: 4px;
  --o-6: 6px;
  --o-8: 8px;
  --o-12: 12px;
  --o-16: 16px;
  --o-24: 24px;
  --o-32: 32px;

  /* Два исключения, которые уже стоят в эталоне: зазор колонок 10 и левое поле строки дела 11
     (8 отступа плюс 3 ширины цветной полоски). Третьего исключения не заводить. */
  --zazor-kolonok: 10px;
  --pole-stroki: 11px;
  --poloska: 3px;

  /* Ширины числовых столбцов таблицы «Отчётов»: запас под «00 000 000» — восемь цифр и два пробела
     разрядов. Они одни на все таблицы, поэтому столбцы стоят на одних и тех же местах на «Вчера»,
     «Неделе» и «Месяце», у любого отдела и в план-факте (возврат 6.10+6.21).

     Не `ch`: единица считается от кегля и начертания того элемента, где стоит, — у сетки это 15
     обычным, а число факта стоит 17 полужирным, и «12 780 000» не влезало на шрифтах шире
     системного мака (возврат 6.22). Здесь — доля от кегля самих чисел: 0,62 ширины знака на кегль
     у табличных цифр с запасом на широкий шрифт вроде DejaVu.

     Столбцов два, и кегль у них разный: факт стоит 17 полужирным, план — 15 обычным. Одна ширина
     на оба считалась по факту и отнимала у названия строки лишние тридцать пикселей: на 320 ему
     оставалось около тридцати, и слова рвались по буквам — «За / яв / ки» (задача 6.23). */
  /* Кегль числа факта: 17, но на узком экране — не больше 4,7 % ширины окна. На 390 это те же 17,
     на 320 — ровно 15, кегль плана. Крупное число само уступает место названию строки там, где
     места нет, и делает это плавно: медиазапросов в продукте нет ни одного, раскладка одна на все
     ширины, и заводить первый ради одной таблицы — менять подход из-за частного случая. */
  --kegl-chisla: min(var(--kegl-17), 4.7vw);
  --stolbec-fakt: calc(var(--kegl-chisla) * 0.61 * 10);
  --stolbec-plan: calc(var(--kegl-15) * 0.61 * 10);
  /* Колонки «вчера · факт» и «вчера · план» отчёта отдела (решение 101): четыре табличные цифры в
     кегле числа таблицы — с запасом под любое число дел отдела за день. Одна ширина на обе колонки;
     кегль сжимается на узком экране, и колонки вместе с ним — названию строки остаётся место. */
  --stolbec-svodki: calc(var(--kegl-chisla) * 0.61 * 4);
  /* Колонка «/» с воздухом по бокам (решение 103): просветов между колонками нет — линия под строкой
     сплошная, — и отступ между фактом, «/» и планом даёт ширина этой колонки. */
  --stolbec-delitelya: calc(var(--kegl-15) * 0.61 + var(--o-6) * 2);
  /* «Сегодня · план»: колонка числа, не уже слова «сегодня» нижнего кегля, с отступом слева. */
  --stolbec-segodnya: calc(var(--kegl-13) * 0.61 * 8 + var(--o-6));

  /* Радиусы. Теней нет: глубина даётся подложкой и линией. */
  --r-8: 8px;    /* всё прямоугольное */
  --r-6: 6px;    /* вложенное скругляется мельче внешнего */
  --r-2: 2px;    /* полоски */
  --r-kruglyy: 999px;

  /* Ширина колонки продукта: шире неё не растягивается ничего (решение 46). */
  --kolonka: 480px;
  /* Скругление рамки телефона. Единственный радиус больше шкалы: это корпус вокруг продукта, а не
     элемент внутри него, — и он появляется только там, где окно шире колонки. */
  --r-telefon: 24px;

  --linia: 1px;
  --obvodka: 2.2;  /* толщина обводки иконки */
  --ikonka: 16px;
  --metka-shirina: 18px;
  /* Кольцо состояния отчёта (решение 36): три, а не два. На кружке 32 пикселя двухпиксельное
     кольцо цвета почти не показывает — владелец прочитал «принят» и «закрылось само» как одно
     и то же (задача 6.7). */
  --koltso: 3px;
  --tochka: 5px;
  --polosa-vysota: 10px;  /* полоса прогноза: высота 10 (свод правил, 10) */
  /* Шторка начинается под дорожкой вкладок: высота шапки, заголовка, подписи и вкладок плюс отступ 8. */
  --verh-shtorki: 175px;  /* точка исхода в ячейке календаря и в легенде */  /* кольцо состояния отчёта вокруг кружка инициалов (решение 36) */

  /* Светлая палитра. Салатовый — акцент, полученные деньги и «исполнено»: один тон «хорошего»
     на весь продукт (решение 35). Цвет держит тон, а светлоту берёт по фону. */
  --ink: #0F0F0F;
  --bg: #FFFFFF;
  --card: #F6F6F6;
  --line: #E9E9E9;
  /* Приглушённый серый (решение 38): 5,17 на белом, 4,79 на подложке карточки и 4,61 на фоне
     перевёрнутой карточки — норма 4,5 выполняется везде. Прежний #8C8C8C давал 3,36. */
  --mute: #6D6D6D;
  --accent: #AEEA00;
  /* «Принято» — свой тон, не бренд и не оранжевый (задача 6.7). Салатовый остаётся бренду: он уже
     значит «главная кнопка» и «выбранная вкладка», и кольцом он путался с оранжевым. Зелёный тона
     147°: 5,35 : 1 на белом, и до оранжевого 78 по ΔE, до красного — 107. */
  --prinyato: #0F7B3F;
  --onAccent: #0F0F0F;
  --naCvete: #FFFFFF;
  --above: #6FA800;
  /* Исход «исполнено» — тот же салатовый тон, что акцент (решение 35). Полоска слева — не текст,
     к ней требование по контрасту не применяется; слово берёт тот же тон, севший по светлоте. */
  --exact: #AEEA00;
  --warn: #F07C00;
  --danger: #E03A2F;
  --unknown: #3B7DD8;
  /* Слово того же тона, севшее по светлоте до 4,5 : 1 (решение 35). Меряется по самому светлому фону,
     на котором слово встречается, — подложке карточки #F6F6F6: на белом запас только больше.
     Полоска и заливка остаются верхними: они не текст. В тёмной теме сажать не нужно — там от 6,7 : 1. */
  --exact-slovo: #5B7A00;
  /* Акцент словом: им пишут число, а не красят заливку, — значит светлота берётся по фону (решение 35). */
  --accent-slovo: #5B7A00;
  --warn-slovo: #AE5A00;
  --danger-slovo: #D72C20;
  --unknown-slovo: #296FCF;
  --above-slovo: #527C00;
  /* Заливка счётчика «отменено»: на волосок светлее самого --danger, чтобы чернила на ней читались. */
  --danger-zalivka: #E14237;
  --idle: #C8C8C8;
  --zatemnenie: rgba(15, 15, 15, .45);
  /* Текст поверх затемнения. Затемнение тёмное в обеих темах, поэтому цвет один и тот же: раньше
     здесь стоял --bg, и в тёмной теме подпись и кнопка «Скопировать» были чёрным по чёрному. */
  --naZatemnenii: #F2F2F0;
  /* Плотное затемнение — под выданный доступ: его читают и переписывают, и светлый текст обязан
     держать 4,5 : 1. Обычного затемнения для этого мало: в светлой теме оно даёт всего 2,7 : 1. */
  --zatemnenie-plotnoe: rgba(15, 15, 15, .88);

  color-scheme: light dark;
}

/* Тёмная тема — с первого экрана. Значения из эталона: на чёрном фоне светлые цвета исходов
   другие, иначе зелёное и синее на чёрном читаются как грязь. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F2F2F0;
    --bg: #0F0F0F;
    --card: #1A1A1A;
    --line: #2B2B2B;
    --mute: #9A9A96;
    --above: #9AD32B;
    /* В тёмной теме тот же тон, поднятый по светлоте: 10,2 : 1 на чёрном. */
    --prinyato: #3DD68C;
    /* В тёмной теме салатовый читается лучше всего — слово того же тона, что полоска. */
    --exact: #AEEA00;
    --warn: #FF9A2E;
    --danger: #FF6B5E;
    --unknown: #5E9BEE;
    --exact-slovo: #AEEA00;
    --warn-slovo: #FF9A2E;
    --danger-slovo: #FF6B5E;
    --unknown-slovo: #5E9BEE;
    --above-slovo: #9AD32B;
    --danger-zalivka: #FF6B5E;
    --idle: #3A3A3A;
    --zatemnenie: rgba(0, 0, 0, .6);
  }
}

/* Перевёрнутая карточка: фон — чернила, текст — фон; в тёмной теме переворачивается обратно.
   Палитра внутри карточки своя, задаётся переопределением переменных внутри блока. */
.perevernutaya {
  --accent-slovo: #AEEA00;  /* фон карточки тёмный: 13,3 : 1 — сажать нечего */
  --ink: #FFFFFF;
  --bg: #0F0F0F;
  --card: #1A1A1A;
  --line: #2B2B2B;
  --mute: #9A9A96;
  --accent: #6FA800;
  background: var(--bg);
  color: var(--ink);
}

@media (prefers-color-scheme: dark) {
  .perevernutaya {
    /* В тёмной теме карточка светлая: тот же тон, севший по светлоте — 4,9 : 1 на её фоне. */
    --accent-slovo: #4E7400;
    --ink: #0F0F0F;
    --bg: #F2F2F0;
    --card: #FFFFFF;
    --line: #E9E9E9;
    --mute: #6D6D6D;
    --accent: #AEEA00;
  }
}