@charset "UTF-8";
/* =========================================================================
   Retrieva — токены

   Палитра снята с логотипа: угольный фон, белая «R», приглушённое кольцо
   цвета шалфея. Второй акцент — холодный сланец: он отвечает за всё
   техническое (мессенджеры, таблицы, метрики), шалфей — за спокойствие
   и снятие боли. Оба приглушены намеренно: неон читается как игрушка,
   а не как подрядчик, которому доверяют переписку с клиентами.

   Базовая единица: 1rem = 10 px (см. base.css), поэтому 1.7rem = 17 px.
   ========================================================================= */

:root {
  /* --------------------------------- ЦВЕТ --------------------------------
     Контраст посчитан к фону --ink. */
  --ink:        #0b0d0c;   /* фон страницы: уголь с чуть зелёным уклоном  */
  --surface:    #131614;   /* приподнятая поверхность                     */
  --surface-2:  #1b201d;   /* поля ввода, вложенные блоки                 */
  --line:       #242926;   /* волосяные линии                             */
  --line-2:     #333935;   /* рамки, по которым ведут курсором            */

  --body:       #b9c2bb;   /* основной текст          — 10.7 : 1          */
  --mute:       #8d968f;   /* подписи и сноски        —  6.4 : 1          */
  --paper:      #f2f5f1;   /* заголовки               — 17.6 : 1          */

  --sage:       #c2d3a4;   /* первый акцент           — 12.1 : 1          */
  --sage-deep:  #47563a;   /* заливки шалфея          —  2.5 : 1, фон     */
  --slate:      #8fa6b8;   /* второй акцент, техника  —  7.7 : 1          */
  --slate-deep: #2f3f4b;   /* заливки сланца          —  фон              */

  /* Служебные цвета платформ. Живут только внутри демо-телефона и на
     кнопках мессенджеров: подменять их брендовыми нельзя — посетитель
     узнаёт мессенджер по цвету. */
  --wa: #25d366;
  --tg: #38b6ff;

  /* --------------------------------- ШРИФТ ------------------------------- */
  --f-display: 'Unbounded', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --f-body:    'Golos Text', 'Segoe UI', Arial, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Шкала кеглей. Заголовки скромнее прошлой версии: 900-й гротеск во весь
     экран кричит, а нам нужно, чтобы читали текст под ним.

     Дисплейный кегль ужат вслед за колонкой: на 68 px заголовок первого
     экрана ломался на пять строк, а кнопки под ним вставали столбиком. */
  --fs-display: clamp(3.0rem, 4.2vw, 5.0rem);
  --fs-h2:      clamp(2.8rem, 3.6vw, 4.2rem);
  --fs-h3:      2.0rem;
  --fs-lead:    2.0rem;
  --fs-body:    1.75rem;
  --fs-small:   1.55rem;
  --fs-mono:    1.2rem;

  /* -------------------------------- ПРОСТРАНСТВО -------------------------
     Колонка чтения узкая намеренно: чем меньше слов в кадре, тем спокойнее
     страница. 46 знаков — примерно семь слов в строке.

     Широкая раскладка ужата со 112 до 98 rem: на 1180 px карточки
     растягивали строку далеко за комфортную длину. Воздух тоже подрезан —
     при 17vh на четырнадцать слоёв уходило под пять экранов одних отступов. */
  --shell:  54rem;
  --wide:   98rem;
  --gutter: 3rem;
  --air:    clamp(7rem, 11vh, 12rem);

  /* -------------------------------- ДВИЖЕНИЕ ----------------------------- */
  --ease:      cubic-bezier(.16, .84, .28, 1);
  --t-fast:    .18s;
  --t-mid:     .45s;
}