/* ============================================================
   tokens.css — дизайн-токены ЮртаНеЖди
   Единый источник цветов, радиусов, теней, анимаций.
   Меняешь тему бренда здесь — меняется весь сайт.
   ============================================================ */
:root{
  /* Поверхности */
  --bg:#fbfaf8;
  --bg-warm:#f6f1ea;
  --surface:#ffffff;
  --surface-2:#fbf7f2;
  --border:#ece5db;
  --border-strong:#ddd3c6;

  /* Огненный акцент */
  --fire:#ff5a1f;
  --fire-2:#ff7a3d;
  --fire-deep:#e8410a;
  --fire-soft:#fff2ec;
  --ember:#ff9a3d;

  /* Текст */
  --ink:#171310;
  --ink-2:#4b433c;
  --ink-3:#8a7f74;

  /* Статус «готов» */
  --lime:#5bbf17;
  --lime-bg:#effbe3;

  /* Платформы */
  --tg:#229ed9;
  --max:#6f5cff;

  /* Шрифты */
  --font-display:'Unbounded','Manrope',sans-serif;

  /* Радиусы */
  --r-lg:30px;
  --r-md:20px;
  --r-sm:14px;

  /* Тени (тёплые, мягкие) */
  --sh-sm:0 2px 8px rgba(60,40,20,.05);
  --sh-md:0 18px 44px -18px rgba(120,70,30,.18);
  --sh-lg:0 40px 90px -34px rgba(120,60,20,.28);
  --sh-fire:0 24px 60px -20px rgba(255,90,31,.45);

  /* Анимация / раскладка */
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1200px;
}

/* ============================================================
   Брейкпоинты — единственный источник правды.

   Числа живут только здесь. JS их не дублирует: assets/js/lib/breakpoints.js
   читает имя текущей раскладки из --bp, поэтому правка ширины в этом файле
   автоматически меняет и поведение скрипта.

     desktop  ≥981px   — пин-сцены Story и Ways, параллакс телефона
     compact  769…980  — потоковая раскладка (карточки обычным потоком)
     mobile   621…768  — закреплённая мобильная Story «Свет заказа»
     phone    ≤620     — то же + компактная шапка и мобильное демо

   Порядок объявлений — от широкого к узкому, каждая следующая перебивает
   предыдущую. Значение — идентификатор без кавычек, JS сравнивает по имени.
   ============================================================ */
:root{--bp:desktop}
@media (max-width:980px){:root{--bp:compact}}
@media (max-width:768px){:root{--bp:mobile}}
@media (max-width:620px){:root{--bp:phone}}