/**
 * Reusable component primitives.
 *
 * These classes are opt-in and do not alter Directory templates yet.
 */
.rumanji-card {
	overflow: hidden;
	border: 1px solid var(--rumanji-border);
	border-radius: var(--rumanji-radius-lg);
	background: var(--rumanji-surface);
	box-shadow: var(--rumanji-shadow-sm);
}

.rumanji-card:hover {
	border-color: rgba(226, 32, 51, 0.22);
	box-shadow: var(--rumanji-shadow-md);
	transform: translateY(-2px);
}

.rumanji-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rumanji-space-2);
	min-height: 44px;
	padding: 0.75rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--rumanji-radius-pill);
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.rumanji-button--primary {
	color: #fff;
	background: var(--rumanji-red-500);
	box-shadow: 0 8px 22px rgba(226, 32, 51, 0.22);
}

.rumanji-button--primary:hover {
	color: #fff;
	background: var(--rumanji-red-600);
	transform: translateY(-1px);
}

.rumanji-button--secondary {
	color: var(--rumanji-text);
	border-color: var(--rumanji-border);
	background: var(--rumanji-surface);
}

.rumanji-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.6rem;
	border-radius: var(--rumanji-radius-pill);
	color: var(--rumanji-red-700);
	background: rgba(226, 32, 51, 0.09);
	font-size: var(--rumanji-size-xs);
	font-weight: 750;
}

.rumanji-icon-button {
	display: inline-grid;
	width: 42px;
	height: 42px;
	place-items: center;
	border: 1px solid var(--rumanji-border);
	border-radius: 50%;
	color: var(--rumanji-text);
	background: var(--rumanji-surface);
	cursor: pointer;
}