/* nicktmsh — токены главной.
   Источник правды: 02 Сайт/Frame 29.png (тёмный) и Frame 28.png (светлый) —
   экспорты фрейма 800:1311 шириной ровно 1200. Это один макет с
   инвертированной палитрой, поэтому тема переключается атрибутом
   data-theme на <html>, а не вторым набором стилей.

   Все размеры ниже сняты с экспорта пиксельно (bbox чернил букв, шаг
   сетки, толщина линеек) и записаны в абсолютных величинах макета.
   Масштабирование даёт одна переменная --u = 1/1200 ширины окна: на 1200
   это ровно 1px, шире и уже — пропорционально. Поэтому calc(N * var(--u))
   читается как «N пикселей макета», композиция занимает экран целиком
   на любой ширине и нигде не разъезжается — вместе с полями и кеглем. */

:root {
  /* Масштабная единица: 1px на макетной ширине 1200, дальше тянется
     вместе с окном — макет всегда во весь экран. Делением, а не
     десятичной дробью: 0.0833333vw даёт на 1200 не ровно 1px, и толщина
     линии (2 × --u) срезается браузером обратно до одного пикселя. */
  --u: calc(100vw / 1200);

  /* --- Материал ------------------------------------------------------- */
  --ink:    #17181A;   /* near-black, основная тёмная поверхность */
  --paper:  #EEEAF2;   /* светлая поверхность */
  --lime:   #BFFE89;   /* сигнальный акцент тёмной темы */
  --violet: #A594FF;   /* второй акцент: парный к лайму, не замена ему */
  --lilac:  #B5B3C8;   /* приглушённый акцент светлой темы, логотипы */

  /* --- Семантика (тёмная тема — вариант Frame 29) ---------------------- */
  --bg:      var(--ink);
  --fg:      var(--paper);
  --accent:  var(--lime);
  --accent-2: var(--violet);
  --logo:    var(--lilac);   /* логотипы клиентов, монохром */

  /* Производные. Проценты сняты пипеткой с экспорта:
     плашка превью — акцент 10% по фону (#282F25), линейка сетки
     проектов — акцент 50% (#6B8B51). */
  --thumb: color-mix(in srgb, var(--accent) 10%, var(--bg));
  --hair:  color-mix(in srgb, var(--accent) 50%, var(--bg));
  --graph: #302B3D;   /* миллиметровка на тёмном, снята пипеткой */

  /* --- Типографика -----------------------------------------------------
     Cy отдаёт cap-height 0.75em и x-height 0.52em; по ним и восстановлены
     кегли с экспорта. Трекинг у дисплейного набора в макете -5%,
     у героя -2% — это разные стили, а не одна величина. */
  --display: "Cy", system-ui, sans-serif;
  --text:    "Inter", system-ui, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", monospace;

  --fs-hero:    calc(128 * var(--u));
  --fs-sub:     calc(20  * var(--u));
  --fs-display: calc(48  * var(--u));   /* 01,02,05,06, ячейки — один кегль */
  --fs-big:     calc(96  * var(--u));   /* лента слов и Lab */
  --fs-footer:  calc(29.5 * var(--u));
  --fs-note:    calc(15  * var(--u));
  --fs-nav:     calc(24  * var(--u));
  --fs-label:   calc(14  * var(--u));   /* метки секций, DM Mono */
  --fs-caption: calc(15  * var(--u));   /* подписи карточек, DM Mono */
  --fs-pill:    calc(13  * var(--u));
  --fs-cellnum: calc(17  * var(--u));

  --lh-display: calc(43 * var(--u));    /* шаг строк дисплейного набора */
  --track:      -0.05em;                /* трекинг дисплейного набора */

  /* --- Сетка -----------------------------------------------------------
     Контент — колонка 912 по центру (поля 144 на 1200), внутри три
     колонки по 304. Ленты и инверсные полосы идут в край. */
  --page:      calc(912 * var(--u));
  --col:       calc(304 * var(--u));
  --graph-cell: calc(38 * var(--u));

  /* --- Линии ------------------------------------------------------------
     Одна толщина на весь сайт: линейка в шапке, обводка пилюль, стрелка в
     02, сетка проектов, рамки ячеек в 06.

     Толщина — целое число пикселей и НЕ умножается на --u, в отличие от
     всего остального. Причина простая: браузер округляет border-width до
     целых пикселей устройства, поэтому дробная величина (1.5 на 1200 или
     3.2 на 1920) у рамок срезается до 1px, а у stroke — нет, и «одна
     толщина» разъезжается. Поэтому всё, что может быть рамкой, — рамка:
     линейка шапки, обводки, сетка, обе стрелки (.arrow).

     Округляет браузер и целый CSS-пиксель: на масштабе экрана 125% 2px —
     это 2.5 пикселя устройства, и рамка выходит в 2. SVG и холст так не
     умеют, поэтому для них js/main.js кладёт в --line-px уже округлённое
     тем же правилом значение: пиктограммы ленты и поле стрелок в 05
     рисуются им и совпадают с рамками пиксель в пиксель.

     Правится ползунком «линия» в панели настроек (кнопка ease справа
     внизу), значение живёт в localStorage. Здесь — стартовое. */
  --line-w: 2;
  --line: calc(var(--line-w) * 1px);
  --line-px: var(--line);   /* до первого кадра main.js — без округления */

  /* --- Движение ---------------------------------------------------------
     --ease и --dur-ui правит панель «ease» в правом нижнем углу и держит
     в localStorage: это кривая и длительность всей интерактивной моторики
     (пилюли, ветки экспертизы, Lab, превью проектов). --ease-out/--dur —
     отдельная пара для проявления блоков по скроллу. */
  --ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-ui:  460ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 600ms;

  /* Ленты: одна линейная скорость на обе — 102 макетных пикселя в секунду.
     Обе ведёт js/main.js: домножает на текущий --u и добавляет скролл. */
  --marquee-speed: 102;
}

/* Светлый вариант — Frame 28. Инверсия, а не отдельный макет. */
:root[data-theme="light"] {
  --bg:     var(--paper);
  --fg:     var(--ink);
  --accent: var(--lilac);
  --logo:   var(--ink);
  --graph:  rgba(23, 24, 26, 0.09);
}