.card {
	background: var(--color-background-primary);
	border: 0.5px solid var(--color-border-tertiary);
	border-radius: var(--border-radius-lg);
	padding: 1rem;
	box-shadow: var(--shadow-sm);
	transition:
		box-shadow var(--transition-fast),
		transform var(--transition-fast);
	cursor: pointer;
	text-decoration: none;
	display: block;
	color: var(--color-text-primary);
}

.card:hover {
	/* box-shadow: var(--shadow-md); */
	/* transform: translateY(-1px); */
}
.card:active {
	/* transform: translateY(0); */
	box-shadow: var(--shadow-sm);
}

.card--warning {
	border: 2px solid var(--color-border-warning);
}

.card-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--border-radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.card-icon--success {
	background: var(--color-background-success);
	color: var(--color-text-success);
}
.card-icon--warning {
	background: var(--color-background-warning);
	color: var(--color-text-warning);
}
.card-icon--info {
	background: var(--color-background-info);
	color: var(--color-text-info);
}
.card-icon--secondary {
	background: var(--color-background-secondary);
	color: var(--color-text-secondary);
}
.card-icon--danger {
	background: var(--color-background-danger);
	color: var(--color-text-danger);
}

.card-label {
	font-size: 0.625rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--color-text-tertiary);
	margin-bottom: 0.2rem;
}

.card-title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--color-text-primary);
	line-height: 1.3;
	margin-bottom: 0.2rem;
}

.card-subtitle {
	font-size: 0.6875rem;
	color: var(--color-text-secondary);
}

.card-footer {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}