/* Единый набор переменных десктопа.

   ОФОРМЛЕНИЕ — MATERIAL (GOOGLE), по просьбе заказчика. Прежние значения
   были перенесены из wb-crm-server; теперь палитра, форма и тени взяты из
   Material 3 в том виде, в каком Google применяет её в своих ПЛОТНЫХ
   продуктах — Search Console, Ads, Drive: тональные поверхности вместо
   рамок, капсульные кнопки, слои состояний и очень сдержанные тени.

   ПЛОТНОСТЬ НЕ ПРИНЕСЕНА В ЖЕРТВУ. У Material размер элемента управления
   по умолчанию 40px и отступы вдвое больше наших — для склада это значит
   вдвое меньше строк на экране. Взята компактная плотность: шкала цвета,
   формы и состояний гугловская, размеры — наши.

   Правится только здесь. shell.css и остальные листы десктопа своих
   определений цвета и шрифта не держат: две таблицы значений расходятся
   в тот день, когда правят одну.

   Телефон (warehouse.css) сюда не входит намеренно: у него тёмная тема
   под цех и свои размеры под палец в перчатке. */

/*
 * Базовые значения — они же тема «Google». Второй селектор нужен, чтобы
 * язык можно было включить и на отдельном элементе: образцы в
 * «Оформлении» показывают настоящие цвета каждой темы, а без него
 * карточка основы наследовала бы тему документа и врала.
 *
 * Значения при этом НЕ дублируются: один блок, два входа.
 */
:root,
[data-theme='material'] {
  /* ---------- шрифты ----------
     В CRM внешних шрифтов нет: «единый стиль как во вкладке Продажи —
     системный шрифт, без внешнего Manrope» (комментарий v142.104).
     У address был Inter — он и не грузился, только стоял первым в списке. */
  --ui: Roboto, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;
  /* Числа — моноширинным, с табличными цифрами: столбец сумм должен
     стоять колонкой, а не гулять по разряду. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /*
   * ЧИСЛА И КОДЫ — РАЗНЫЕ ЗАДАЧИ, и потому разные гарнитуры.
   *
   * Код артикула набирается моноширинным не ради вида: в нём ноль надо
   * отличить от «O», а единицу от «l», иначе кладовщик возьмёт не ту
   * коробку. Это остаётся во всех оформлениях.
   *
   * А числа в столбцах моноширинными быть не обязаны — им нужно лишь
   * стоять колонкой, и это даёт `tabular-nums` в любой современной
   * гарнитуре. Ни Stripe, ни Asana, ни Google в своих таблицах
   * моноширинный не применяют. Раз так, числа берут шрифт темы — и
   * тогда переключение видно там, где на экран смотрят дольше всего.
   */
  --num: var(--ui);

  /* ---------- фон и поверхности ---------- */
  --bg: #f0f4f9;        /* M3 surface-container: фон приложения */
  --surface: #fff;      /* M3 surface: карточка, панель */
  --surface-2: #f8fafd; /* M3 surface-container-low: строка под курсором */
  --head: #f8fafd;      /* шапка таблицы и строка «итого» */
  --subrow: #f8fafd;    /* вложенная строка */

  /* ---------- текст ---------- */
  --ink: #1f1f1f;       /* M3 on-surface */
  --ink-2: #444746;     /* M3 on-surface-variant */
  --ink-3: #747775;     /* M3 outline: третьестепенное */

  /* ---------- линии ---------- */
  --line: #dadce0;      /* граница Google: карточки, кнопки */
  --line-2: #ebedef;    /* граница между строками таблицы */
  --line-3: #c4c7c5;    /* M3 outline: граница поля ввода */

  /* ---------- смысловые цвета ----------
     Ссылка и активный элемент — #2563eb: в CRM им покрашены и активная
     кнопка сегмента, и ссылка в воронке. Совпало с прежним значением
     address, менять было нечего. */
  --accent: #0b57d0;       /* M3 primary — синий Google */
  --accent-soft: #d3e3fd;  /* M3 primary-container */
  --accent-line: #a8c7fa;  /* граница на primary-container */

  /* Заморозка: работа приостановлена решением. Намеренно холодный
     и неяркий — это не тревога, а состояние. Тревожные цвета здесь
     топили бы настоящие заторы. */
  --frost: #eef2f7;        /* фон пометки «заморожено» */
  --frost-ink: #43566e;    /* текст на ней */
  --frost-line: #c9d4e3;   /* граница блока в сводке */

  --go: #146c2e;           /* зелёный Google: текст на плашке */
  --go-bright: #1e8e3e;    /* рост, положительное число */
  --go-soft: #e6f4ea;      /* заливка успеха */
  --go-line: #a8dab5;      /* граница успеха */

  --amber: #b06000;        /* жёлтый Google: текст предупреждения */
  --amber-bright: #f9ab00; /* предупреждение, «число неверно» */
  --amber-soft: #fef7e0;   /* заливка предупреждения */
  --amber-line: #feefc3;   /* граница предупреждения */

  --stop: #b3261e;         /* M3 error: отказ, падение */
  /* Мягкой заливки под красное в CRM нет — плашки об ошибках там не
     рисуют. Оставлено прежнее значение address, чтобы «отклонено»
     осталось читаемым. */
  --stop-soft: #fce8e6;

  /* Фиолетового в наборе CRM нет: --c-ads:#c084fc красит одну линию
     графика рекламы, для плашек он светел. Значение address оставлено. */
  --violet: #9334e6;       /* фиолетовый Google */
  --violet-soft: #f3e8fd;

  /* Текст на мягкой заливке. В CRM пары нет: плашек с длинным текстом
     там не делают, а брать цвет самой заливки нельзя — не прочитаешь.
     Оставлены прежние значения address, они темнее фона на нужные ступени. */
  --on-amber: #7f5700;
  --on-stop: #8c1d18;
  --on-go: #0d652d;

  /* Цвета участков производства. Это опознавательные знаки колонок,
     а не состояния: «раскрой» не лучше и не хуже «пошива», и брать под них
     смысловые --go/--stop/--amber нельзя — те означают исход, а не место.
     Порядок тот же, что на доске: от начала маршрута к концу. */
  --st-new:      #64748B;
  --st-cutting:  #0EA5E9;
  --st-prep:     #6366F1;
  --st-sewing:   #8B5CF6;
  /* Покраска и чистка-упаковка появились вместе с разделением «фур/чистки». */
  --st-paint:    #A855F7;
  --st-hardware: #D97706;
  --st-packing:  #14B8A6;
  --st-ready:    #10B981;

  /* Цвета рядов и статей на экране продаж Ozon.
     Опознавательные знаки, а не состояния: «комиссия» не хуже «хранения»,
     и брать под них смысловые --go/--stop нельзя — те означают исход.
     Девять — по числу рядов графика; статьи расходов берут те же по кругу,
     поэтому одна статья всегда одного цвета и в списке, и на диаграмме. */
  --ozc-1: #0EA5E9;
  --ozc-2: #E11D48;
  --ozc-3: #059669;
  --ozc-4: #6366F1;
  --ozc-5: #A855F7;
  --ozc-6: #D97706;
  --ozc-7: #0891B2;
  --ozc-8: #7C3AED;
  --ozc-9: #65A30D;

  /* Пометка тестового контура. Своя пара, а не --amber-*: та означает
     предупреждение о данных («число неверно»), и путать её с «вы не на том
     сервере» нельзя — это разные тревоги. Полоса яркая намеренно: она
     обязана мешать перепутать прод с тестом. */
  --contour-a: #FFC94A;
  --contour-b: #F0B429;
  --contour-line: #C88A00;
  --on-contour: #3A2A00;

  /* Наведение на синюю кнопку и активный раздел сайдбара — из CRM:
     .ni.active красит текст в --blue2, а не заливает кнопку целиком. */
  --accent-dark: #0842a0;  /* нажатие и наведение на синюю кнопку */
  --accent-nav: #0b57d0;   /* выбранный раздел меню */
  --accent-nav-soft: #d3e3fd; /* капсула под выбранным разделом */

  /* ---------- форма ---------- */
  /*
   * РАЗМЕРЫ ЭЛЕМЕНТОВ УПРАВЛЕНИЯ — одна высота на всю систему.
   *
   * До этого кнопка была 31px, поле 32px, фильтр-капсула 29px. Разница
   * в два-три пикселя не читается как решение — она читается как брак:
   * в одной строке ничего не выравнивается по нижнему краю. Высота
   * задаётся здесь и только здесь, чтобы новый экран не завёл четвёртую.
   *
   * Форма разная НАМЕРЕННО и по смыслу: прямоугольник со скруглением —
   * действие или ввод, капсула — фильтр-переключатель. Смешаны только
   * размеры, а не назначения.
   */
  --ctl-h: 32px;           /* кнопка, поле, чип — единая высота */
  /*
   * ФОРМА ПО MATERIAL. Кнопка и фильтр — капсула: это узнаваемый знак
   * Material 3 и главное, что отличает гугловский интерфейс от любого
   * другого. Поле ввода капсулой НЕ делается: текст в нём начинается
   * от левого края, и круглая стенка съедает первый знак — у Google
   * поля тоже прямоугольные со скруглением.
   */
  --r-ctl: 999px;          /* действие и фильтр — капсула */
  --r-field: 8px;          /* поле ввода — прямоугольник со скруглением */
  --r-pill: 999px;         /* капсула — синоним для чипов */

  --r: 12px;               /* M3 medium: панель, карточка */
  --r-card: 12px;
  /*
   * ОСТАЛЬНЫЕ СКРУГЛЕНИЯ СЧИТАЮТСЯ ОТ ГЛАВНОГО, а не задаются числами.
   *
   * Раньше в оболочке было девятнадцать разных радиусов, из них лишь
   * четверть — токенами. Тема меняла токен, а полторы сотни мест
   * оставались с материаловской округлостью, что ни выбери. Отсюда и
   * ощущение, что переключение оформления почти ничего не меняет.
   *
   * Считая шаги от `--r`, тема получает одну ручку на всю систему:
   * задала острые четыре пикселя — острым стало всё, включая то, что
   * ещё не написано.
   */
  --r-tiny: calc(var(--r) * .25);   /* метки, полоски, засечки */
  --r-xs:   calc(var(--r) * .42);
  --r-sm:   calc(var(--r) * .67);
  --r-lg:   calc(var(--r) * 1.33);
  --r-xl:   calc(var(--r) * 1.67);

  /*
   * РАЗМЕРЫ ТЕКСТА. Их было тридцать — непрерывный ряд от 8.5 до 70,
   * потому что каждый экран подгоняли на глаз отдельно. Ни 11 от 11.5,
   * ни 12 от 12.5 человек не отличает; отличает он только беспорядок.
   * Шкала собрана так, что ни одно место не сдвинулось больше чем на
   * полпикселя: вид прежний, а правило появилось.
   *
   * Терминал сборщика (warehouse.css) живёт по своей шкале и сюда не
   * входит: там крупные цифры сделаны нарочно, чтобы читать их с
   * вытянутой руки, стоя у стеллажа.
   */
  --fs-0: 9px;             /* значок, засечка на плитке */
  --fs-1: 10px;
  --fs-2: 11px;            /* подпись показателя */
  --fs-3: 12px;            /* основной для таблиц */
  --fs-4: 13px;
  --fs-5: 15px;            /* текст и заголовок строки */
  --fs-6: 17px;
  --fs-7: 20px;            /* число в карточке */
  --fs-8: 24px;
  --fs-9: 30px;
  --fs-10: 40px;           /* крупное число на сводке */
  /*
   * ТЕНИ MATERIAL — уровень 1, и почти нигде больше. У Google плоскость
   * задаётся тоном поверхности, а не тенью; тень означает «этот слой
   * действительно лежит выше» — всплывающее меню, диалог.
   */
  --shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-card: 0 1px 2px rgba(60,64,67,.15);

  /*
   * СЛОИ СОСТОЯНИЙ. В Material наведение и нажатие — это полупрозрачная
   * плёнка цвета текста поверх элемента, одна и та же для всех кнопок.
   * Поэтому кнопки не нужно перекрашивать по одной: меняется слой.
   */
  --state-hover: rgba(31,31,31,.08);
  --state-press: rgba(31,31,31,.12);
  --state-on-accent: rgba(255,255,255,.12);
  /*
   * Текст на залитой кнопке. Обычно белый, но не всегда: у Wrike кнопка
   * ярко-зелёная и подпись на ней тёмно-синяя — белым по такому зелёному
   * не прочитать. Раз это меняется от языка к языку, значит это токен.
   */
  --on-accent: #fff;

  /*
   * КАК ВЫГЛЯДИТ ВЫБРАННОЕ. Это тоже язык, а не мелочь: одни системы
   * заливают выбранный фильтр цветом действия, другие — как Asana —
   * поднимают его белой «таблеткой» с тенью на сером поле. Разница
   * заметна каждый раз, когда что-то выбираешь, то есть постоянно.
   */
  --pick-bg: var(--accent);        /* фон выбранного фильтра */
  --pick-ink: var(--on-accent);    /* его подпись */
  --pick-line: var(--accent);      /* его граница */
  --pick-shadow: none;             /* приподнят ли он над полем */
  --pick-group: transparent;       /* поле, на котором лежит группа */

  /* ---------- графики ----------
   * Толщина линий и сетки — тоже часть языка оформления, а не мелочь.
   * У Stripe линии тонкие и воздушные, у Fluent плотные и деловые; на
   * плотной таблице с двадцатью колонками разница читается сильнее, чем
   * цвет. Поэтому величины вынесены в токены: график не знает, какой
   * сейчас язык, он просто берёт нужную толщину.
   */
  --chart-line: 2px;       /* линия ряда */
  --chart-grid: 1px;       /* линия сетки и оси */
  --chart-dot: 3.5px;      /* точка на линии и в матрице */
  --chart-bar-r: 2px;      /* скругление столбца */
  --chart-label: 9px;      /* подпись оси */
  --chart-grid-color: var(--line);

  /* ---------- размеры таблицы ----------
     Из раздела «Продажи»: шапка 7px 8px, ячейка 6px 8px, кегль 12px.
     Плотнее, чем было в address (10px 16px и 11px 16px при 13.5px):
     на экран влезает вдвое больше строк, а именно за этим в таблицу
     и смотрят. */
  --tbl-size: var(--fs-3);
  --tbl-th-pad: 7px 8px;
  --tbl-td-pad: 6px 8px;

  /* ---------- отступы страницы ---------- */
  --pad-x: 22px;           /* CRM .content / .topbar */
  --pad-y: 18px;           /* CRM .content */
  --side-w: 224px;         /* CRM .sidebar */
}