:root {
	--xcard-radius: 12px;
	--c-fg: #1f2937; /* neutral-800 */
	--c-bg: #fff;
	--c-border: #e5e7eb;
	--c-info-bg: #fffbeb; /* amber-50 */
	--c-info-accent: #b45309; /* amber-700 */
	--c-info-neutral: #ffffff; /* amber-700 */
	--c-warn: #ef4444; /* red-500 */
	--c-ok: #10b981; /* emerald-500 */
	--c-muted: #6b7280; /* gray-500 */
}

/*@media (prefers-color-scheme: dark) {*/
:root {
	--c-fg: #e5e7eb;
	--c-bg: #333;
	--c-border: #374151;
	--c-info-bg: #1f2937;
	--c-info-accent: #f59e0b;
	--c-muted: #9ca3af;
}

.xcard {
	border: 1px solid var(--c-border);
	border-radius: var(--xcard-radius);
	background: var(--c-bg);
	color: var(--c-fg);
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.xcard__header {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
	font-weight: 300;
	border-bottom: 1px solid var(--c-border);
}

.xcard--info .xcard__header {
	background: var(--c-info-bg);
	border-bottom-color: transparent;
}

.xcard__header .fa {
	color: var(--c-info-accent);
}

.xcard__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.4;
	font-weight: 400;
	color: var(--c-info-neutral);
}

.xcard__content {
	padding: 1rem 1.25rem;
	line-height: 1.5;
}

.xcard--grey {
	background-color: #353535;
}

.xcard--blue {
	background-color: #484f5b;
}