/* =========================================================================
   TMN Talents — палитра

   Стоит между китом и композицией: кит остаётся нетронутым, а его токены
   отсюда перенаправляются на новые значения. Тот же приём, что в
   посадочнике Frogge (css/palette.css поверх Lattice).

   Значения сняты пипеткой с референса (Midjourney, флэтовые блоки коллажа),
   а не подобраны на глаз. Доли в кадре: near-black 16%, оранжевый 13%,
   фиолетовый 11%, голубой 5% — отсюда и роли: чёрный держит полотно,
   оранжевый ведёт как первый акцент, остальные идут по кругу.

   ЧЁРНЫЙ — ЕДИНСТВЕННОЕ ИСКЛЮЧЕНИЕ из пипетки: он взят чистым, #000000.
   С референса снималось #0a0a08 — по светлоте 4% и с подтоном настолько
   слабым, что на большом полотне читался ближе к тёмно-серому, чем к
   чёрному. Пробовали углублять с сохранением тёплого подтона (#080604);
   остановились на чистом нуле: полотно должно быть полотном, а всю
   температуру на странице несут мел, коралл и круг акцентов.

   За ним обнулены и --c-raise с --c-line: тёплая приподнятая поверхность
   на чистом чёрном читалась бы как грязь, а не как материал. Обе теперь
   нейтральные и отличаются от полотна только светлотой.

   Зерно тут не украшение, а часть цвета: белые крупинки поднимают чистый
   чёрный примерно до #060606, поэтому полотно нигде не выглядит провалом.
   Где зерна нет — там чёрный именно нулевой; следить за этим приходится
   руками, см. секцию «Зерно» в README.

   Это осознанный уход от кита Frame & Field: он построен на бумаге, ink и
   ОДНОМ акценте и прямым текстом запрещает вводить второй акцентный цвет.
   Здесь система многоцветная, и от кита остаётся типографика, ритм и
   геометрия компонентов — не цвет.
   ========================================================================= */

:root {
  /* ---- Сырая палитра ------------------------------------------------ */
  --c-void: #000000; /* полотно */
  /* Те же каналы числами: нужны там, где чёрный берут с переменной
     прозрачностью (вуаль героя), а из hex её не собрать. */
  --c-void-rgb: 0, 0, 0;
  --c-raise: #0f0f0f; /* приподнятая поверхность: рамки плиток */
  --c-line: #262626; /* волосяная линия на тёмном */
  --c-chalk: #f3f1ec; /* набор */
  /* Каналами — там, где цвет нужен с прозрачностью или собирается из
     долей: набор блока «Что мы делаем» и перетекание полотна между
     блоками (js/paper.js). Та же причина, что у --c-void-rgb ниже. */
  --c-chalk-rgb: 243, 241, 236;
  --c-chalk-dim: #dcd8ce; /* наведение на светлую пилюлю */
  --c-ash: #9a968c; /* второстепенный набор */

  /* Коралловый — фон кадра в герое. Не из круга акцентов: он не красит
     элементы, а держит секцию, пока шейдер не нарисовал первый кадр. */
  --c-coral: #eb7a76;

  /* Фиолетовый — полотно блока «Что мы делаем». Тоже не из круга акцентов:
     он не красит элементы, а держит целый разворот. Единственный цвет на
     странице, заведённый ради одного блока: коралл, стоявший там раньше,
     был взят у героя, но собственный разворот и фон героя читались одним
     событием.

     Тёмный и насыщенный — по светлоте 8.6%, — поэтому набор на нём светлый,
     а не чёрный, как было на коралловом: чистый чёрный даёт к нему 2.7:1
     и пропадает, мел — 6.8:1. */
  --c-violet: #5b2cd1;

  /* Второй конец полотна блока «Что мы делаем»: прокрутка стопки ведёт его
     от фиолетового к этому за пять карт (js/paper.js по data-paper-end).

     ЭТО ЗАКАЗАННЫЙ #F97B1A, ОПУЩЕННЫЙ ПО СВЕТЛОТЕ. Тон и насыщенность взяты
     у него один в один (26° и 95% по HSL), светлота опущена с 54% до 30% —
     и вот почему.

     У самого #F97B1A светлота 34.4% по яркости, и мел даёт к нему 2.36:1:
     набор блока на нём не «плохо читается», а пропадает. Лечится это
     единственным способом — перекрасить набор в чёрный по дороге, — и
     стоит дороже, чем стоит сам цвет. Во-первых, на середине пути набор
     совпал бы с полотном по тону и пропал ТАМ: у чёрного и у мела в этой
     точке одинаковые 4.3:1, и любой переход между ними проходит через
     серое. Во-вторых, тем же набором ведётся выход блока: на выезде из него
     страница возвращается к чёрному полотну и мелу, и посреди этого возврата
     пара оказалась бы «серое по бурому» — под этим в тот момент уже стоит
     набор следующего блока.

     Опущенный тон обходится без всего этого: полотно идёт от фиолетового
     (светлота 8.6%) к этому (10.9%) — то есть почти на одной высоте, — и
     контраст мела за все пять карт не падает ниже 6.0:1, а в середине пути
     даже выше начального (7.3 против 6.8). Набор на всём блоке остаётся
     мелом, как и на всей странице.

     Хотите именно исходную яркость — это отдельная работа, и её цена
     описана выше. */
  --c-ember: #954304;

  --c-orange: #fb7c2b;
  --c-purple: #ac57bc;
  --c-blue: #58a0e3;
  /* СЕЙЧАС НЕ ЧИТАЕТСЯ. Каналами голубой был нужен кнопке героя: холодным
     подсветом снизу она набирала объём, а из hex переменную прозрачность не
     собрать. Кнопка переехала на стекло, и цвета в ней не осталось вовсе.
     Токен держим — это одна строка, и она ничего не стоит, пока на неё
     никто не ссылается. */
  --c-blue-rgb: 88, 160, 227;
  --c-magenta: #fa266c;
  /* СЕЙЧАС НЕ ЧИТАЕТСЯ. Тем же цветом светилась отбивка под кнопкой героя —
     серединой её градиента. Кнопка стеклянная, и цветное свечение под ней
     снято намеренно: оно красило кадр, который стекло обязано показывать.
     Токен держим, см. --c-blue-rgb выше. */
  --c-magenta-rgb: 250, 38, 108;
  --c-green: #5eae79;
  --c-orchid: #c684d4;
  --c-red: #fd2c30;

  /* ---- Перенаправление токенов кита ---------------------------------
     Роли кита переворачиваются: «бумага» становится полотном, «ink» —
     набором. Производные токены кита (--color-bg, --color-fg, --color-
     border и прочие) собраны из этих же через var(), поэтому подхватят
     новые значения сами. */
  --color-paper: var(--c-void);
  --color-surface: var(--c-raise);
  --color-ink: var(--c-chalk);
  --color-charcoal: var(--c-chalk-dim);
  --color-muted: var(--c-ash);
  --color-hairline: var(--c-line);
  --color-signal: var(--c-orange);

  /* ---- Набор на цветном и на чёрном ---------------------------------
     Кит держит эти оттенки прямо в правилах (rgba от бумажного), но здесь
     они нужны в обе стороны: на чёрном полотне набор светлый, на цветном
     блоке — чёрный. */
  --fg-on-void-soft: rgba(243, 241, 236, 0.72);
  --fg-on-void-faint: rgba(243, 241, 236, 0.58);
  --fg-on-accent: var(--c-void);
  --fg-on-accent-soft: rgba(0, 0, 0, 0.74);

  /* ---- Круг акцентов -------------------------------------------------
     Порядок повторяет вес цветов в референсе. Элемент читает --accent и не
     знает, какой именно цвет ему достался, — раздаёт .accent-cycle ниже. */
  --accent-1: var(--c-orange);
  --accent-2: var(--c-purple);
  --accent-3: var(--c-blue);
  --accent-4: var(--c-magenta);
  --accent-5: var(--c-green);
  --accent-6: var(--c-orchid);
  --accent: var(--accent-1);
}

/* Раздача акцентов по кругу. Вешается на контейнер списка или сетки;
   считает по позиции в разметке, а не по видимости, поэтому фильтр ростера
   не перекрашивает карточки под собой. */
.accent-cycle > *:nth-child(6n + 1) {
  --accent: var(--accent-1);
}
.accent-cycle > *:nth-child(6n + 2) {
  --accent: var(--accent-2);
}
.accent-cycle > *:nth-child(6n + 3) {
  --accent: var(--accent-3);
}
.accent-cycle > *:nth-child(6n + 4) {
  --accent: var(--accent-4);
}
.accent-cycle > *:nth-child(6n + 5) {
  --accent: var(--accent-5);
}
.accent-cycle > *:nth-child(6n + 6) {
  --accent: var(--accent-6);
}

/* Полотно красим явно: у кита фон висит на body, а тянуть чёрный нужно на
   всю высоту документа, иначе на коротких экранах снизу проступает белое. */
html {
  background-color: var(--c-void);
}

/* Выделение мышью на тёмном полотне — акцентом, а не системным синим. */
::selection {
  background-color: var(--c-orange);
  color: var(--c-void);
}