/* ============================================
   Kemi - Custom Icon System
   On-brand SVG icons replacing emojis
   Warm, minimal, line-weight consistent
   Stroke: 1.5px, color: currentColor
   Base size: 28px (use-case cards), 40px (country flags)
   ============================================ */

/* ---------- Icon container ---------- */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon svg {
  display: block;
}

/* ---------- Icon backgrounds ---------- */
.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ivory);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-circle-teal {
  background: rgba(26, 107, 90, 0.08);
}
.icon-circle-lg {
  width: 64px;
  height: 64px;
  border-radius: 16px;
}

/* ---------- Country markers ---------- */
.country-marker {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  margin-bottom: 16px;
}
.country-marker-in {
  background: #FFF3E8;
  color: #C77B3F;
}
.country-marker-gb {
  background: #E8EEF5;
  color: #4A6FA5;
}
.country-marker-za {
  background: #E8F5EE;
  color: #2D7A4F;
}
.country-marker-mx {
  background: #E8F0E8;
  color: #3D7A3D;
}
.country-marker-se {
  background: #F5F0E0;
  color: #8B7A2B;
}
.country-marker-ph {
  background: #EDE8F5;
  color: #5A4A8A;
}
.country-marker-tr {
  background: #F5E8E8;
  color: #9B4A4A;
}
.country-marker-ke {
  background: #F5EDE8;
  color: #7A5A3D;
}