/* Именованные шкалы размеров.
   rem — считается от корневого font-size 16px (settings.css) и не
   зависит от font-size окружения: спейсеры, гэпы, ширины обёрток.
   em внутри компонентов (padding кнопок, radius) масштабируется вместе
   с текстом самого компонента — задаётся на месте, не токеном.

   --density — множитель "воздуха" (по мотивам IDS), по умолчанию 1 —
   ничего не меняет, все отступы остаются пиксель-в-пиксель с Figma.
   Применяется только к spacer/gap (padding, gap, margin — "воздух"
   вокруг контента), не к radius/border/размерам ассетов и не к
   em-паддингам кнопок — те масштабируются вместе со своим текстом,
   это отдельная ось. */

:root {
  --density: 1;

  --spacer-s: 0.75rem;
  --spacer-m: 1.5rem;
  --spacer-l: 3rem;
  --spacer-xl: 4.5rem;

  --gap-xs: calc(var(--density) * 0.125rem);
  --gap-s: 0.5rem;
  --gap-m: 1rem;

  --radius: 0.75rem;
  --radius-pill: 9999px;

  --border-width-s: 1px;
  --border-width-m: 2px;

  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --easing-base: ease;
}