/* ==========================================================================
   Иконотека — Figma 37:3844, секции Interface и Social.

   Все семнадцать иконок нарисованы одинаково: бокс 24×24, обводка 2, торцы
   square, стыки bevel. Поэтому размер задаётся одним числом, а пропорции и
   толщина штриха приходят из файла сами: при 16 обводка выходит 1.33, при
   12 — ровно 1, при 20 — 1.67. Это те же числа, что стояли в старых, отдельно
   экспортированных файлах, — геометрия от перехода на библиотеку не поехала.

   Иконка в вёрстке — не <img>, а пустой элемент с маской: контур берётся из
   файла, цвет даёт currentColor. Причина та же, что у лого в шапке: <img> из
   CSS не покрасить, а тема меняет цвет всем иконкам разом. Заодно один файл
   служит обеим темам, и иконка всегда совпадает по цвету с текстом рядом —
   в том числе в приглушённом (--color-text-subtle) и на картинке кейса.

   Файлы лежат с currentColor в заливке, но маске важна только альфа: цвет в
   самом файле нужен, лишь если иконку однажды вставят инлайном.
   Пересобираются из выгрузки Figma скриптом tools/build-icons.mjs.

   Размер перекрывается через --icon-size в блоке (см. .menu__icon — 12,
   .case-card__share-icon — 20). По умолчанию 16: в этом боксе стоит в макете
   большинство иконок.
   ========================================================================== */

.icon {
  display: block;
  flex: none;
  inline-size: var(--icon-size, 16px);
  block-size: var(--icon-size, 16px);
  background-color: currentColor;
  -webkit-mask: var(--icon-url) no-repeat center / contain;
  mask: var(--icon-url) no-repeat center / contain;
}

/* --- Interface ---------------------------------------------------------- */

.icon--bullit       { --icon-url: url("../assets/img/icons/bullit.svg"); }
.icon--check        { --icon-url: url("../assets/img/icons/check.svg"); }
.icon--chevron-down { --icon-url: url("../assets/img/icons/chevron-down.svg"); }
.icon--chevron-up   { --icon-url: url("../assets/img/icons/chevron-up.svg"); }
.icon--link         { --icon-url: url("../assets/img/icons/link.svg"); }
.icon--moon         { --icon-url: url("../assets/img/icons/moon.svg"); }
.icon--placeholder  { --icon-url: url("../assets/img/icons/placeholder.svg"); }
.icon--share        { --icon-url: url("../assets/img/icons/share.svg"); }
.icon--sun          { --icon-url: url("../assets/img/icons/sun.svg"); }

/* --- Social -------------------------------------------------------------
   Имена совпадают с полем `icon` в data/case-pages.js: оттуда приходит
   `telegram`, `behance` и так далее, и класс собирается по нему же. */

.icon--behance      { --icon-url: url("../assets/img/social/behance.svg"); }
.icon--dprofile     { --icon-url: url("../assets/img/social/dprofile.svg"); }
.icon--dribbble     { --icon-url: url("../assets/img/social/dribbble.svg"); }
.icon--dsgners      { --icon-url: url("../assets/img/social/dsgners.svg"); }
.icon--instagram    { --icon-url: url("../assets/img/social/instagram.svg"); }
.icon--pinterest    { --icon-url: url("../assets/img/social/pinterest.svg"); }
.icon--telegram     { --icon-url: url("../assets/img/social/telegram.svg"); }
.icon--workspace    { --icon-url: url("../assets/img/social/workspace.svg"); }