/* Семантические токены Shift — то, что не входит в семантику IDS.
   Тот же слой, что colors.css: цвета берутся из палитры. */

:root,
.light {
  --shift__brand: var(--ids__color-orange-450);
  --shift__aside-background: var(--ids__color-gray-50);
  --shift__shadow-color: var(--ids__color-gray-300);
  --shift__billet-under: var(--ids__color-blue-800);

  /* Плашки промоблоков главной */
  --shift__promo-orange: var(--ids__color-orange-450);
  --shift__promo-yellow: var(--ids__color-yellow-400);
  --shift__promo-dark: var(--ids__color-brown-900);
  --shift__promo-pink: var(--ids__color-pink-400);
  --shift__promo-green: var(--ids__color-teal-500);
  --shift__promo-gray: var(--ids__color-gray-300);

  --shift__description-font: "Elma-Trio-Slanted-Web", monospace;

  /* Исходящее сообщение в переписке соцсетей (фиолетовый Instagram) */
  --shift__chat-out: var(--ids__color-violet-500);
  --shift__chat-out-text: var(--ids__color-white);

  /* Воздух вокруг иллюстраций: к тексту — с обеих сторон, к заголовку после
     картинки — больше (правила — docs/content-markup.md, «Отступы»). Группы
     .ids__media-group S/M/L живут со своими 4/3/2em */
  --shift__illustration-gap: 1.5em;
  --shift__illustration-heading-gap: 2.5em;
}

html.dark {
  --shift__aside-background: var(--ids__color-slate-700);
  --shift__shadow-color: var(--ids__color-slate-950);
}