.card {
	@include mixins.reset-button;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;

	width: 160px;
	height: 160px;

	background: linear-gradient(180deg, variables.$bg-default 0%, variables.$bg-surface 100%);
	border: 1px solid variables.$border-subtle;
	border-radius: variables.$radius-lg;
	box-shadow: var(--shadow-sm);

	color: variables.$text-secondary;

	cursor: pointer;
	transition:
		transform variables.$duration-normal variables.$ease-out,
		box-shadow variables.$duration-normal variables.$ease-out,
		border-color variables.$duration-normal variables.$ease-out,
		background variables.$duration-normal variables.$ease-out,
		color variables.$duration-normal variables.$ease-out;

	&:hover {
		transform: translateY(-4px);
		box-shadow: var(--shadow-lg);
		color: variables.$text-primary;
		border-color: variables.$purple-300;
	}

	&:active {
		transform: translateY(-1px);
		box-shadow: var(--shadow-md);
	}

	&.accent {
		background: linear-gradient(135deg, variables.$accent-solid-start 0%, variables.$accent-solid-end 100%);
		border-color: transparent;
		color: variables.$accent-foreground;
		box-shadow: 0 4px 14px variables.$accent-shadow;

		&:hover {
			filter: brightness(1.06);
			box-shadow: 0 6px 20px variables.$accent-shadow-hover;
		}
	}
}

.label {
	@include typography.font-body-s;
	font-weight: 500;
}