/* suggar.me Icon System — monochrome CI pink, 24×24 grid, stroke-width 1.5 */
:root {
  --icon-pink: #E8839A;
  --icon-pink-hover: #D4708A;
  --icon-pink-disabled: rgba(232,131,154,0.35);
}

.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  color: var(--icon-pink);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 0.18s, opacity 0.18s;
  overflow: visible;
}

/* Sizes */
.icon--sm   { width: 0.9em;  height: 0.9em;  }
.icon--md   { width: 1.5em;  height: 1.5em;  }
.icon--lg   { width: 2em;    height: 2em;    }
.icon--xl   { width: 2.5em;  height: 2.5em;  }
.icon--2xl  { width: 3rem;   height: 3rem;   }
.icon--card { width: 36px;   height: 36px;   }
.icon--step { width: 30px;   height: 30px;   }
.icon--sidebar { width: 18px; height: 18px;  stroke-width: 1.5; }
.icon--inline  { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.icon--floaty  { width: 18px; height: 18px; }

/* Color */
.icon--white    { color: white; }
.icon--dark     { color: #2D2A33; }
.icon--gray     { color: #8E8A96; }
.icon--success  { color: #5DC09C; }
.icon--error    { color: #E05555; }
.icon--pink     { color: var(--icon-pink); }

/* Filled variant (for check circles etc.) */
.icon--filled { fill: currentColor; stroke: none; }
.icon--filled-stroke { fill: currentColor; }

/* Disabled */
[disabled] .icon,
.icon--disabled { opacity: 0.35; pointer-events: none; }

/* Hover via button/link parent */
a:hover > .icon,
button:hover > .icon,
a:hover .icon--inherit,
button:hover .icon--inherit { color: var(--icon-pink-hover); }

/* Inline text pairing: gap between icon and label */
.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Card icon container (replaces font-size:2rem emoji) */
.card-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-pink);
  margin-bottom: 14px;
}
.card-icon .icon { width: 36px; height: 36px; }

/* Step icon container */
.step-icon .icon { width: 30px; height: 30px; color: var(--icon-pink); }

/* Floaty animation icons */
.floaty .icon { color: var(--icon-pink); opacity: 0.85; }