/* The tokens every stylesheet of the client reads: the spacing scale, and the semantic colours mapped onto Radzen's
   variables, so they follow the theme's light and dark switch. The host's theme.css adds the product's own. */

:root {
	--app-space-1: 0.25rem;
	--app-space-2: 0.5rem;
	--app-space-3: 0.75rem;
	--app-space-4: 1rem;
	--app-space-5: 1.25rem;
	--app-space-6: 1.5rem;
	--app-space-8: 2rem;

	--app-radius: var(--rz-border-radius);

	--app-surface: var(--rz-base-background-color);
	--app-surface-muted: var(--rz-base-100);
	--app-border: var(--rz-base-300);
	--app-text: var(--rz-text-color);
	--app-text-muted: var(--rz-text-secondary-color);
	--app-on-brand: var(--rz-on-primary);

	--app-state-success: var(--rz-success);
	--app-state-warning: var(--rz-warning);
	--app-state-danger: var(--rz-danger);
	--app-state-info: var(--rz-info);
}