/* === SVG Icons (brands + UI) ===
   One SVG file = one icon.
   Render via mask so icons are strict/flat and themeable by color.
*/

/* base */
.ico-svg{
  width:20px;
  height:20px;
  display:inline-block;
  background-color: var(--ico-color, #111);
  -webkit-mask: var(--ico-url) no-repeat center / contain;
  mask: var(--ico-url) no-repeat center / contain;
}

/* themes (we attach theme to .card-ui) */
.card-ui[data-ico-theme="mono"]  .ico-svg{ --ico-color:#111; }
.card-ui[data-ico-theme="muted"] .ico-svg{ --ico-color:#6b7280; }

/* optional brand theme (only a few shown; rest stays default) */
.card-ui[data-ico-theme="brand"] .ico-svg.instagram{ --ico-color:#E1306C; }
.card-ui[data-ico-theme="brand"] .ico-svg.telegram { --ico-color:#229ED9; }
.card-ui[data-ico-theme="brand"] .ico-svg.whatsapp { --ico-color:#25D366; }
.card-ui[data-ico-theme="brand"] .ico-svg.facebook { --ico-color:#1877F2; }
.card-ui[data-ico-theme="brand"] .ico-svg.linkedin { --ico-color:#0A66C2; }
.card-ui[data-ico-theme="brand"] .ico-svg.youtube  { --ico-color:#FF0000; }

/* brand colors for ui-* icons */
.card-ui[data-ico-theme="brand"] .ico-svg.ui-instagram { --ico-color:#E1306C; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-telegram  { --ico-color:#229ED9; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-facebook  { --ico-color:#1877F2; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-whatsapp  { --ico-color:#25D366; }

/* === polish === */
.tile .ico{display:flex;align-items:center;justify-content:center}
.ico-svg{width:18px;height:18px}

/* === polish v1 === */
.tile .ico{display:flex;align-items:center;justify-content:center}
.ico-svg{width:18px;height:18px}
.ico-svg.instagram,.ico-svg.telegram,.ico-svg.whatsapp,.ico-svg.facebook,.ico-svg.linkedin,.ico-svg.youtube,.ico-svg.twitter,.ico-svg.github,.ico-svg.discord,.ico-svg.reddit,.ico-svg.snapchat,.ico-svg.tiktok,.ico-svg.pinterest,.ico-svg.threads{width:17px;height:17px}

/* === SSCard: brand colors for ui-* icon classes === */
.card-ui[data-ico-theme="brand"] .ico-svg.ui-instagram{ --ico-color:#E1306C; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-telegram { --ico-color:#229ED9; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-facebook { --ico-color:#1877F2; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-whatsapp { --ico-color:#25D366; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-youtube  { --ico-color:#FF0000; }
.card-ui[data-ico-theme="brand"] .ico-svg.ui-linkedin { --ico-color:#0A66C2; }

/* safety: ensure icon uses the variable */
.ico-svg{ background-color: var(--ico-color, #111); }