/* Shared Badge Styles - Using Notion Design System */
.marketplace-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px; /* rounded-md per Notion Design System - NO pill shapes */
	font-size: 12px;
	font-weight: 500;
	transition: all 0.15s ease;
	/* Fallback for non-VS Code environments */
	background: var(--vscode-badge-background, #333);
	color: var(--vscode-badge-foreground, #fff);
}

/* VS Code specific variables - these will work in the extension */
:root {
	--badge-contributor-bg: hsl(217 91% 60% / 0.15);
	--badge-contributor-fg: hsl(217 91% 68%);
	--badge-prolific-bg: hsl(271 76% 65% / 0.15);
	--badge-prolific-fg: hsl(271 81% 76%);
	--badge-rising-star-bg: hsl(45 93% 47% / 0.15);
	--badge-rising-star-fg: hsl(48 96% 53%);
	--badge-guru-bg: hsl(142 71% 45% / 0.15);
	--badge-guru-fg: hsl(142 69% 58%);
}

.badge-contributor {
	background: var(--badge-contributor-bg);
	color: var(--badge-contributor-fg);
	border: 1px solid hsl(217 91% 60% / 0.3);
}
.badge-prolific {
	background: var(--badge-prolific-bg);
	color: var(--badge-prolific-fg);
	border: 1px solid hsl(271 76% 65% / 0.3);
}
.badge-rising-star {
	background: var(--badge-rising-star-bg);
	color: var(--badge-rising-star-fg);
	border: 1px solid hsl(45 93% 47% / 0.3);
}
.badge-guru {
	background: var(--badge-guru-bg);
	color: var(--badge-guru-fg);
	border: 1px solid hsl(142 71% 45% / 0.3);
}

/* Icon styles */
.marketplace-badge i,
.marketplace-badge .codicon {
	font-size: 12px;
}

/* Unified Icon System */
@font-face {
	font-family: 'Font Awesome 6 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2')
			format('woff2'),
		url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.ttf')
			format('truetype');
}

.badge-icon {
	display: inline-block;
	width: 14px;
	text-align: center;
	font-style: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/* Always use FontAwesome for badges to ensure consistency */
.badge-icon::before {
	font-family: 'Font Awesome 6 Free' !important;
	font-weight: 900;
}

.badge-contributor .badge-icon::before {
	content: '\f303';
} /* pen */
.badge-prolific .badge-icon::before {
	content: '\f5fd';
} /* layer-group */
.badge-rising-star .badge-icon::before {
	content: '\f201';
} /* chart-line */
.badge-guru .badge-icon::before {
	content: '\f005';
} /* star */
.badge-admin .badge-icon::before {
	content: '\f3ed';
} /* shield-alt */
.badge-newcomer .badge-icon::before {
	content: '\e05b';
} /* hand-sparkles */

/* Removed VS Code Environment Overrides to force identical icons */