@import url('./imported.css');
@design-tokens url('./tokens/basic.json') format('style-dictionary3');

.foo {
	font-family: design-token('font.family.base');
	font-size: design-token('size.font.small');
	color: design-token('color.font.base');
}

.card {
	background-color: design-token('card.background');
	color: design-token('card.foreground');
	color: design-token(  'card.foreground');
	color: design-token('card.foreground'  );
	color: design-token(
		/* a foreground color */
		'card.foreground'
	);
	color: design-token(
		'card.foreground'
		/* a foreground color */
	);
	color: design-token('does.not.exist');
}

.lists {
	margin: design-token('lists.space');
	color: rgb(design-token('lists.comma'));
	complex: does-not-exist(
		foo(design-token('lists.space')),
		bar(design-token('lists.comma'))
	);
}
