/* ============================================
   VV2 STONE COLD — SVG ICON SYSTEM
   All icons are inline SVG, no emoji used
   ============================================ */

/*
  HOW TO USE:
  Include this file in your HTML like:
    <link rel="stylesheet" href="css/icons.css" />

  Then use icon classes like:
    <span class="icon icon-scoop"></span>
    <span class="icon icon-whatsapp"></span>

  OR use the <svg> snippets directly from this file
  as reference to paste inline into your HTML.
*/

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; /* fixed box to keep grid alignment */
  height: 22px;
  vertical-align: middle;
  flex-shrink: 0;
  font-size: 18px; /* emoji size inside the box */
  line-height: 0; /* prevent baseline gaps */
  overflow: hidden;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon svg[stroke] {
  fill: none;
}

/* Size modifiers */
.icon-sm  { width: 16px;  height: 16px;  font-size: 14px; }
.icon-md  { width: 28px;  height: 28px;  font-size: 22px; }
.icon-lg  { width: 40px;  height: 40px;  font-size: 30px; }
.icon-xl  { width: 56px;  height: 56px;  font-size: 44px; }
.icon-2xl { width: 64px;  height: 64px;  font-size: 52px; }

/* Color modifiers */
.icon-pink   svg { fill: var(--pink);   }
.icon-purple svg { fill: var(--purple); }
.icon-white  svg { fill: var(--white);  }
.icon-dark   svg { fill: var(--dark);   }
.icon-green  svg { fill: #25D366;       }
.icon-orange svg { fill: var(--orange); }
.icon-yellow svg { fill: var(--yellow); }