/*
Ability Esports — Avatar primitive.
/docs/UI-PATTERN-LIBRARY.md §3, /docs/ASSET-ART-DIRECTION.md §23. Circular/
square portrait slot with a deterministic initials fallback — the fallback
is honestly a placeholder (surface-2 + secondary text), never a color-coded
"fake identity" treatment, since no token in this system's closed accent
palette (/docs/DESIGN-TOKENS.md §4.1) is licensed for decorative per-person
color coding.
*/

.ae-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	background: var(--ae-color-surface-2);
	color: var(--ae-color-text-secondary);
	font-family: var(--ae-font-display);
	font-weight: var(--ae-weight-heading);
	line-height: 1;
	user-select: none;
}

.ae-avatar--circle {
	border-radius: var(--ae-radius-pill);
}

.ae-avatar--square {
	border-radius: var(--ae-radius-sm);
}

.ae-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ae-avatar--sm {
	width: 2rem;
	height: 2rem;
	font-size: var(--ae-text-caption);
}

.ae-avatar--md {
	width: 2.75rem;
	height: 2.75rem;
	font-size: var(--ae-text-body);
}

.ae-avatar--lg {
	width: 4rem;
	height: 4rem;
	font-size: var(--ae-text-h4);
}

.ae-avatar--xl {
	width: 6rem;
	height: 6rem;
	font-size: var(--ae-text-h2);
}