/* ==========================================================================
   FINAM Design Machine — базовые классы (единственный источник)
   Формат: OpenDesign od-design-system-project/v1 (files.utilities)

   Подключается в <head> после tokens.css (каркасы шаблонов уже содержат
   правильный относительный путь — сохрани его при сборке):
   <link rel="stylesheet" href="<путь>/design-systems/finam/utilities.css">

   Классы строятся только на семантических токенах tokens.css — тёмная тема
   наследуется автоматически. Локальные копии этих классов в стилях
   артефакта — дублирование, брак (см. DESIGN.md «Антипаттерны»).
   ========================================================================== */

/* Микро-метка: кегль micro + капслок + разрядка
   (DESIGN.md «Типографика»; цвет наследуется или задаётся локально) */
.fn-micro {
  font: var(--fn-text-micro);
  text-transform: var(--fn-transform-micro);
  letter-spacing: var(--fn-tracking-micro);
}

/* Иконка реестра icons.html: канонический CSS-блок
   (DESIGN.md «Иконки»; в артефакт инлайн-копируется только SVG-разметка) */
.fn-icon {
  width: var(--fn-icon-size-m);
  height: var(--fn-icon-size-m);
  stroke: currentColor;
  stroke-width: var(--fn-icon-stroke);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.fn-icon--s { width: var(--fn-icon-size-s); height: var(--fn-icon-size-s); }
.fn-icon--l { width: var(--fn-icon-size-l); height: var(--fn-icon-size-l); }

/* Логотип-плашка «ФИНАМ» (DESIGN.md «Компоненты и паттерны»;
   вектор из assets/ при появлении) */
.fn-logo {
  font: var(--fn-text-h3);
  text-transform: var(--fn-transform-micro);
  letter-spacing: var(--fn-tracking-micro);
  background: var(--fn-color-corporate);
  color: var(--fn-color-ink-inverse);
  padding: var(--fn-space-2) var(--fn-space-4);
  border-radius: var(--fn-radius-s);
  width: fit-content;
}

/* Нейтральный бейдж-метка: pill на bg-emphasised — канон badge--neutral
   кита (DESIGN.md «Компоненты и паттерны»; тренды — overlay, не этот класс) */
.fn-badge {
  font: var(--fn-text-micro);
  text-transform: var(--fn-transform-micro);
  letter-spacing: var(--fn-tracking-micro);
  padding: var(--fn-space-1) var(--fn-space-3);
  border-radius: var(--fn-radius-pill);
  background: var(--fn-color-bg-emphasised);
  color: var(--fn-color-ink-secondary);
  width: fit-content;
}