/* ============================================================
   Токены Shelfready — направление «Верстак».

   Единственное место в проекте, где стоят настоящие значения
   цвета, шрифта и размера. Ни одного цвета вне этого файла:
   правило перенесено из Warm Lens.
   ============================================================ */

:root {
  /* ---- цвет ---- */
  /*
   * Владелец сказал: сайт выглядит очень тёмным. Так и было — карточка
   * отличалась от фона на десять единиц яркости, и вся страница читалась
   * одним чёрным полем. Поверхности разведены: фон, карточка, приподнятое.
   * Теперь между ними видна ступенька, а не догадка.
   */
  /*
   * Сами серые уведены в сторону акцента — «сливовые».
   *
   * Были зеленоватыми: в #191C1A больше всего зелени. Зелёный и розовый
   * стоят почти напротив друг друга на круге, и серый рядом с розовым от
   * этого мутнел — владелец назвал это грязным, и это ровно оно.
   *
   * Насыщенность держим на 8–11 %: это по-прежнему серый, просто
   * родственный собственному свету страницы, а не спорящий с ним. Выше 15 %
   * он перестал бы быть серым и начал спорить с кнопкой.
   *
   * Тон один на всю лестницу — 338°, тон самого акцента.
   */
  --c-bg:        #1C1719;   /* фон страницы */
  --c-surface:   #2C2528;   /* карточка, поле, панель */
  --c-raised:    #383033;   /* приподнятое: шапка таблицы, наведение, чередование */
  --c-sunk:      #151113;   /* утопленное: подложка под кадром */
  --c-text:      #ECE9EA;   /* основной текст */
  --c-muted:     #A89FA2;   /* подписи, размеры, второстепенное */
  --c-accent:    #FF4D8D;   /* акцент-заливка: кнопка, черта, свет */
  --c-accent-in: #1C0610;   /* текст на акценте */
  --c-ok:        #3FBF8F;   /* готово */

  /*
   * Два цвета существуют отдельно только ради контраста на светлых
   * поверхностях.
   *
   * Розовый заливкой хорош каким есть, но как текст на приподнятой
   * поверхности он давал 4,00 : 1 при норме 4,5. Осветлён на 5 %.
   * Красный на той же поверхности давал 3,30; осветлён на 10 %.
   * На сливовой лестнице у них теперь 4,69 и 4,62 — обмерено заново
   * после смены оттенка, а не оставлено на веру от прежней.
   */
  --c-accent-text: #FF679D;
  --c-error:       #EA7B72;

  /* производные — считаются от основных, отдельной правды не заводят */

  /*
   * Цвет краёв.
   *
   * Рамки были серыми — просто приглушённым текстом, — и владелец сказал, что
   * это некрасиво: розовый или белый. Ни то, ни другое поодиночке не годится.
   *
   * Сплошь розовые рамки убивают сам розовый: когда обведено всё, кнопка
   * «Start free» перестаёт быть главным предметом на странице, а она главная.
   * Сплошь белые делают сайт контрастнее, но не теплее — тот же серый, ярче.
   *
   * Поэтому край — почти белый с третью розового. Тёплый, заметно светлее
   * прежнего, и не спорит с акцентом: полный #FF4D8D остаётся только там, где
   * что-то происходит — кнопка, наведение, выбранная ступень, живая черта.
   */
  --c-edge:      color-mix(in srgb, var(--c-text) 70%, var(--c-accent));
  --c-line:      color-mix(in srgb, var(--c-edge) 34%, transparent);
  --c-line-soft: color-mix(in srgb, var(--c-edge) 18%, transparent);
  /*
   * Наведение поднимает карточку на ту же ступень, что и шапка таблицы, —
   * своего цвета ему не нужно. Прежде оно подмешивало 18 % текста и уезжало
   * до #464A47: подписи на нём давали 3,78 : 1 при норме 4,5, а у выбранной
   * ступени цен это не наведение, а постоянное состояние. Теперь худшее из
   * всего, что на нём пишут, — 4,62.
   */
  --c-hover:     var(--c-raised);
  --c-focus:     var(--c-accent);

  /* ---- шрифт ---- */
  /* Файлы лежат в assets/fonts своими woff2. С сервера Google ничего
     не тянем: он получает адрес каждого посетителя. */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* заголовки */
  --f-body:    "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;  /* размеры, подписи */

  --fw-display: 700;
  --fw-semi:    600;
  --fw-medium:  500;
  --fw-body:    400;

  /* заголовки узкие и плотные — язык цеха, а не галереи */
  --fs-display-stretch: 112%;

  /* ---- размер текста ---- */
  --t-xs:   0.75rem;    /* 12 — подписи размеров */
  --t-sm:   0.875rem;   /* 14 */
  --t-base: 1rem;       /* 16 — основной */
  --t-lg:   1.125rem;   /* 18 */
  --t-xl:   1.5rem;     /* 24 */
  --t-2xl:  2rem;       /* 32 */
  --t-3xl:  clamp(2.25rem, 5vw, 3.5rem);   /* заголовок раздела */
  /* Первый экран. Крупно, но не настолько, чтобы окно броска ушло за край:
     оно здесь главное, а заголовок лишь объясняет. */
  --t-hero: clamp(2.25rem, 5vw, 3.5rem);

  --lh-tight: 1.04;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  --ls-tight:   -0.025em;
  --ls-normal:  0;
  --ls-label:    0.14em;   /* моноширинные подписи в разрядку */

  /* ---- отступы ---- */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ---- ширины ---- */
  --w-page:  1200px;   /* предел содержимого */
  --w-text:  65ch;     /* читаемая строка */
  --w-form:  520px;

  /* ---- геометрия ---- */
  /*
   * Прежде углы были прямые везде: «верстак — прямые углы». Владелец
   * попросил скруглить кнопки, рамки и таблицы, и это его решение.
   *
   * Шкала, а не одно число: у поля ввода в 44 точки высотой и у панели
   * в 400 одинаковое скругление выглядит ошибкой — на маленьком оно
   * съедает угол, на большом теряется.
   */
  --r-sm:  6px;    /* поля ввода, мелкие плашки */
  --r-md:  10px;   /* кнопки */
  --r-lg:  14px;   /* карточки, кадры, панели */
  --r-xl:  20px;   /* крупное: таблица, призыв, зона загрузки */
  --r-dot: 50%;    /* кружок состояния */

  --border: 1px solid var(--c-line);

  /* ---- движение ---- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}

/* ============================================================
   Переменные GeneratePress, переведённые на наши токены.

   Родительская тема красит свою начинку не жёсткими цветами, а
   собственными переменными: карточка содержимого, например, берёт
   --base-3. Поэтому воевать правилами не нужно — достаточно сказать
   этим переменным, что они значат у нас, и вся начинка родителя
   покрасится сама, включая то, до чего мы ещё не дошли.

   Настоящие значения по-прежнему живут только выше, в блоке цвета.
   ============================================================ */

:root {
  --base:       var(--c-sunk);
  --base-2:     var(--c-surface);
  --base-3:     var(--c-bg);
  --contrast:   var(--c-text);
  --contrast-2: var(--c-muted);
  --contrast-3: var(--c-line);
  --accent:     var(--c-accent);
}