/* Avatar mapping. ui-viz lists Avatar only as a component name (no spec), so these are current HM values. Sizes follow the shadcn
   API (sm | default | lg). The fallback uses the green tint face (the shared accent). */
:root, [data-hm-theme] {
  --hm-avatar-size-sm: 24px;
  --hm-avatar-size-md: 32px;
  --hm-avatar-size-lg: 40px;
  --hm-avatar-radius: 9999px;

  --hm-avatar-fallback-background: var(--accent);
  --hm-avatar-fallback-text: var(--accent-foreground);
  --hm-avatar-fallback-font-weight: 500;
  --hm-avatar-fallback-font-size-sm: 10px;
  --hm-avatar-fallback-font-size-md: 12px;
  --hm-avatar-fallback-font-size-lg: 14px;
}

[data-slot="avatar"] {
  --hm-avatar-size: var(--hm-avatar-size-md);
  --hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-md);
  width: var(--hm-avatar-size);
  height: var(--hm-avatar-size);
  border-radius: var(--hm-avatar-radius);
}
[data-slot="avatar"][data-size="sm"] {
  --hm-avatar-size: var(--hm-avatar-size-sm);
  --hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-sm);
}
[data-slot="avatar"][data-size="lg"] {
  --hm-avatar-size: var(--hm-avatar-size-lg);
  --hm-avatar-fallback-font-size: var(--hm-avatar-fallback-font-size-lg);
}
[data-slot="avatar-fallback"] {
  border-radius: var(--hm-avatar-radius);
  background: var(--hm-avatar-fallback-background);
  color: var(--hm-avatar-fallback-text);
  font-size: var(--hm-avatar-fallback-font-size);
  font-weight: var(--hm-avatar-fallback-font-weight);
  line-height: 1;
  overflow: hidden;
  white-space: nowrap;
}