/* @casoon/ui-framework - Design Tokens */

:root {
	/* ========================================
     SPACING
     ======================================== */
	--ui-space-xs: 4px;
	--ui-space-sm: 8px;
	--ui-space-md: 16px;
	--ui-space-lg: 24px;
	--ui-space-xl: 32px;
	--ui-space-2xl: 48px;

	/* ========================================
     TYPOGRAPHY
     ======================================== */
	--ui-font-family:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--ui-font-mono:
		ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--ui-font-size-xs: 12px;
	--ui-font-size-sm: 13px;
	--ui-font-size: 14px;
	--ui-font-size-lg: 16px;
	--ui-font-size-xl: 18px;
	--ui-font-size-2xl: 24px;
	--ui-font-size-3xl: 30px;

	--ui-line-height: 1.5;
	--ui-line-height-tight: 1.25;
	--ui-line-height-loose: 1.75;

	--ui-font-weight-normal: 400;
	--ui-font-weight-medium: 500;
	--ui-font-weight-semibold: 600;
	--ui-font-weight-bold: 700;

	/* ========================================
     BORDERS
     ======================================== */
	--ui-radius-sm: 2px;
	--ui-radius: 4px;
	--ui-radius-md: 6px;
	--ui-radius-lg: 8px;
	--ui-radius-xl: 12px;
	--ui-radius-full: 9999px;

	--ui-border-width: 1px;

	/* ========================================
     SHADOWS
     ======================================== */
	--ui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--ui-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--ui-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--ui-shadow-md:
		0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--ui-shadow-lg:
		0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

	/* ========================================
     TRANSITIONS
     ======================================== */
	--ui-duration-fast: 150ms;
	--ui-duration: 200ms;
	--ui-duration-slow: 300ms;
	--ui-easing: cubic-bezier(0.4, 0, 0.2, 1);

	/* ========================================
     Z-INDEX
     ======================================== */
	--ui-z-dropdown: 100;
	--ui-z-sticky: 200;
	--ui-z-modal-backdrop: 300;
	--ui-z-modal: 400;
	--ui-z-popover: 500;
	--ui-z-tooltip: 600;
	--ui-z-toast: 700;
}