/* Avatars -see docs/strategy/design-system/35-avatar.md */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 800;
  flex-shrink: 0;
}

.avatar--sm { width: 32px; height: 32px; border-radius: var(--radius-sm); font-size: var(--font-size-small); }
.avatar--md { width: 40px; height: 40px; border-radius: var(--radius-sm); font-size: var(--font-size-body); }
.avatar--lg { width: 60px; height: 60px; border-radius: var(--radius-sm); font-size: var(--font-size-heading); }

.avatar--round { border-radius: 999px; }

.avatar--primary {
  background: var(--primary);
  color: var(--surface);
}

/* Topbar avatar -fixed 30px, always round, always primary fill */
.topbar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--surface);
  font-size: var(--font-size-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}