/*
  Точка входу стилів. Складання немає — браузер сам збирає решту
  через @import, а base.html підключає лише цей файл.

  Порядок шарів нижче ВАЖЛИВІШИЙ за специфічність: правило з пізнішого
  шару виграє в правила з ранішого, хай яким «сильним» той селектор був.
  Завдяки цьому в проєкті майже немає !important і немає гонки селекторів.

  Хто де: rhythm — вертикальні відступи МІЖ блоками сторінки (мусить стояти
  після components, бо гасить власні margin компонентів), service —
  інлайнові стилі конкретного сервіса, utilities — точкові класи-виправлення.
*/
@layer reset, tokens, base, layout, components, rhythm, service, utilities;

@import url("00-reset.css") layer(reset);
@import url("10-tokens.css") layer(tokens);
@import url("20-base.css") layer(base);
@import url("30-layout.css") layer(layout);

@import url("40-components/actions.css") layer(components);
@import url("40-components/alert.css") layer(components);
@import url("40-components/badge.css") layer(components);
@import url("40-components/breadcrumb.css") layer(components);
@import url("40-components/button.css") layer(components);
@import url("40-components/card.css") layer(components);
@import url("40-components/chips.css") layer(components);
@import url("40-components/collapse.css") layer(components);
@import url("40-components/console.css") layer(components);
@import url("40-components/datepicker.css") layer(components);
@import url("40-components/empty.css") layer(components);
@import url("40-components/filedrop.css") layer(components);
@import url("40-components/form.css") layer(components);
@import url("40-components/icon.css") layer(components);
@import url("40-components/menu.css") layer(components);
@import url("40-components/modal.css") layer(components);
@import url("40-components/pager.css") layer(components);
@import url("40-components/steps.css") layer(components);
@import url("40-components/table.css") layer(components);
@import url("40-components/theme-toggle.css") layer(components);
@import url("40-components/tile.css") layer(components);
@import url("40-components/timeline.css") layer(components);
@import url("40-components/toast.css") layer(components);

@import url("50-rhythm.css") layer(rhythm);

@import url("90-utilities.css") layer(utilities);

/* Плавний перехід між сторінками там, де браузер це вміє.
   Суто косметика: де не підтримується — просто звичайна навігація. */
@view-transition {
  navigation: auto;
}