/* Токени uiblockify — одна сітка на сайт, кабінет і адмінку.
 *
 * Крок 8px, 4px там, де 8 завелике (іконки, дрібні відступи в чипсах).
 * Кегль і міжрядковий — теж кратні 4, щоб текст сідав на ту саму сітку.
 *
 * Правило: у власному CSS кожен розмір лежить на сітці — або через ці
 * змінні, або кратним 8px (4px, де 8 завелике). Винятки позначаються
 * коментарем `grid-ok` у тому ж рядку. Перевіряє `node tools/check-grid.mjs`.
 *
 * CSS самого Framer (сітка каталогу, картка, модалка) під це правило не
 * підпадає — його ми поступово переписуємо блоками, і кожен переписаний
 * блок уже на сітці.
 */

:root {
  /* ---- відступи ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* ---- кегль / міжрядковий ---- */
  --t-xs: 12px;   --lh-xs: 16px;
  --t-sm: 14px;   --lh-sm: 20px;
  --t-md: 16px;   --lh-md: 24px;
  --t-lg: 20px;   --lh-lg: 28px;
  --t-xl: 24px;   --lh-xl: 32px;
  --t-2xl: 32px;  --lh-2xl: 40px;

  /* ---- радіуси ---- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pill: 999px;

  /* ---- висоти елементів керування ---- */
  --h-sm: 32px;
  --h-md: 40px;
  --h-lg: 48px;

  /* ---- лінії ---- */
  --line-w: 1px;

  /* ---- шрифти ---- */
  --font: Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-num: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Мінípрелоадер: смужка вгорі, поки сторінка доінініціалізовується.
   Одна на сайт і на маркетингові сторінки. */
.uib-progress {
  position: fixed; inset: 0 auto auto 0; height: 4px; width: 0;
  background: #7c5cff; z-index: 9999; pointer-events: none;
  animation: uib-progress 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes uib-progress {
  0% { width: 0 } 40% { width: 56% } 100% { width: 88% }
}
html[data-uib-ready] .uib-progress {
  width: 100%; opacity: 0;
  transition: width 0.2s ease, opacity 0.32s ease 0.16s;
}
@media (prefers-reduced-motion: reduce) { .uib-progress { display: none } }