/* Polychrome — ФИРМЕННЫЙ МАТЕРИАЛ. Единственный источник правды по тому, из чего
   сделаны поверхности студии: цвет, движение, стекло. Отсюда берут и сайт студии,
   и тема «Путешествие» для документов. Раньше эти же значения лежали копиями в
   обоих местах — полсотни литералов, которые правились вручную и по одному.

   Здесь только ЧИСТЫЕ значения, как они задуманы. Производные (погашенные под белую
   бумагу, подсветлённые под графит) живут там, где нужны, и в комментарии у каждой
   написано, от какого исходного она посчитана и на сколько процентов.

   Это НЕ tokens.css. Токены описывают документ студии — сдержанный, на трёх цветных
   ролях, со своими шкалами кегля, отступа и длительности. Материал — то общее, что
   есть и у документа, и у сайта, притом что шкалы у них разные. Базовые документы
   этот файл не подключают, поэтому он и отдельным.

   Подключение:
     сайт:    import '@design/brand.css'  (копия лежит в shared/design/)
     md2doc:  --css design/brand.css --css design/themes/journey.css
              (именно двумя флагами: md2doc вшивает CSS в документ, и @import
               внутри готовой страницы уже не разрешится) */

:root {
  /* Спектр ленты — семь стопов, по кругу от мадженты к фиолетовому. */
  --s-magenta: #FF0080;   /* фирменный акцент: кнопки, выделение, фокус */
  --s-red:     #FF2D2D;
  --s-yellow:  #FFE500;
  --s-lime:    #A6FF00;
  --s-cyan:    #00E0FF;
  --s-blue:    #2D6BFF;
  --s-violet:  #7A2BFF;
  /* Вне ленты, но из того же семейства. */
  --s-teal:    #00E0A0;   /* бирюза индикаторов */
  --s-orange:  #ff6d1d;   /* точка ленты между красным и жёлтым (35% к жёлтому);
                             понадобилась там, где жёлтый не читается как текст */

  --s-ribbon: linear-gradient(90deg, var(--s-magenta), var(--s-red), var(--s-yellow),
                              var(--s-lime), var(--s-cyan), var(--s-blue), var(--s-violet));

  /* Нейтральный ряд. Серые ЧИСТЫЕ (R=G=B): цветность прежних «тёплых» оттенков была
     0.004–0.014 по OKLCH — глазом не видна, а системы не образовывала, да ещё светлая
     и тёмная красились в разные стороны. Заменены нейтралями той же светлоты.
     Имена по роли, а не по номеру: обе стороны используют их одинаково. */
  --n-paper-light: #ffffff;   /* бумага / лист */
  --n-ink-light:   #0e0e0e;   /* основной текст */
  --n-hud-light:   #757575;   /* подписи и мета. 4.61:1 НА БУМАГЕ — и только на ней:
                                 на столе #f4f4f4 это 4.19, на плашке #ededed 3.94.
                                 Для документа, где текст лежит на всех трёх, нужна
                                 производная (#6b6b6b), она в tokens.css. Здесь —
                                 материал сайта, у которого поверхность одна. */
  --n-line-light:  #c6c6c6;   /* кант панелей */

  --n-paper-dark:  #0c0c0c;
  --n-ink-dark:    #d5d5d5;
  --n-hud-dark:    #868686;
  --n-line-dark:   #333333;

  /* ── Движение ──────────────────────────────────────────────────────────────
     Одна кривая на всё: резкий старт, долгий выход. Выезд панели, ховеры,
     доводки. Длительностей здесь нет намеренно — шкалы у сторон разные: у
     документа три яруса (--dur-* в tokens.css), у сайта один переход.
     ЧЕГО ЭТА КРИВАЯ ПОКА НЕ КАСАЕТСЯ: base.css документа держит свои литералы
     (.2,.7,.2,1) и (.3,.85,.25,1) — они старше этого файла и меняют повадку
     хрома, поэтому сведение к одной кривой требует отдельного решения. */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Стекло ────────────────────────────────────────────────────────────────
     Полупрозрачная подложка плюс размытие того, что за ней. --glass — доля
     бумаги в подложке, замешивается на месте:
         color-mix(in srgb, var(--paper) var(--glass), transparent)
     Размытие двухступенчатое: «лист» под крупное (панель, финальный остров) и
     «мелочь» под чипы, навигацию и тулбары. Третьей ступени не заводим — 9 и 12
     уже на границе различимости, промежуточное значение ничего не даст. */
  --glass: 78%;
  --blur-sheet: 12px;
  --blur-chip: 9px;
}