/* Иконки КЕЛЕВРО. Спрайты: /kelevro/img/icons/sprite.svg (набор A, контур) и sprite-b.svg (набор B, двухтоновый), компонент <x-ico name="…" set="b" />.
   Правила — docs/tz-grafika-i-ikonki.md (часть C). Цвета задаются переменными и наследуются:
   линия — currentColor, акцент — --ico-accent, мягкая заливка — --ico-soft, мягкая заливка акцента (набор A) — --ico-soft-fill. */
:root { --ico-accent: #005bff; --ico-soft: #dce8ff; --ico-soft-fill: rgb(0 91 255 / .14); }
.ico { display: inline-block; flex: none; vertical-align: middle; color: inherit; } /* размер задаёт атрибут size компонента (по умолчанию 24); классы ниже его переопределяют */
.ico--s { width: 16px; height: 16px; }
.ico--m { width: 20px; height: 20px; }
.ico--l { width: 32px; height: 32px; }
.ico--xl { width: 48px; height: 48px; }
.ico--xxl { width: 72px; height: 72px; }
/* Тёмный фон: линия белая, акцент светлее, мягкая заливка — полупрозрачный белый. Класс ставится на любой родитель. */
.ico-dark { color: #fff; --ico-accent: #5b9bff; --ico-soft: rgb(255 255 255 / .16); --ico-soft-fill: rgb(91 155 255 / .22); }
/* Одноцветный вариант: акцент в цвет линии (кнопки, подвал) */
.ico--mono { --ico-accent: currentColor; --ico-soft: transparent; --ico-soft-fill: transparent; }
/* Плитка под иконку */
.ico-tile { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 16px; background: var(--blue-light, #ebf2ff); color: #0b1020; }
.ico-tile--round { border-radius: 50%; }