:root {
	/* Color - Primary */
	--color-primary-50: #eef1ff;
	--color-primary-100: #e1e4fe;
	--color-primary-200: #c9cffc;
	--color-primary-300: #a7affa;
	--color-primary-400: #8485f5;
	--color-primary-500: #7067ed;
	--color-primary-600: #5e48e0;
	--color-primary-700: #533cc6;
	--color-primary-800: #4433a0;
	--color-primary-900: #3a307f;

	/* Color - Secondary */
	--color-secondary-50: #ECFDFF;
	--color-secondary-100: #CFF9FE;
	--color-secondary-200: #A5F0FC;
	--color-secondary-300: #67E3F9;
	--color-secondary-400: #22CCEE;
	--color-secondary-500: #06AED4;
	--color-secondary-600: #EAAA08;
	--color-secondary-700: #0E7090;
	--color-secondary-800: #0E7090;
	--color-secondary-900: #164C63;

	/* Color - Neutral */
	--color-neutral-white: #FFFFFF;
	--color-neutral-50: #F7F7F7;
	--color-neutral-100: #eeeeee;
	--color-neutral-200: #e1e1e1;
	--color-neutral-300: #cfcfcf;
	--color-neutral-400: #aaaaaa;
	--color-neutral-500: #898989;
	--color-neutral-600: #626262;
	--color-neutral-700: #4f4f4f;
	--color-neutral-800: #313131;
	--color-neutral-900: #111111;

	/* Color - Danger */
	--color-danger-50: #ffebed;
	--color-danger-100: #ffcccf;
	--color-danger-200: #fb9893;
	--color-danger-300: #f46e69;
	--color-danger-400: #fe4a40;
	--color-danger-500: #ff361d;
	--color-danger-600: #f5291f;
	--color-danger-700: #e31a1a;
	--color-danger-800: #d60b11;
	--color-danger-900: #c80000;

	/* Color - Warning */
	--color-warning-50: #fef8e1;
	--color-warning-100: #fcecb3;
	--color-warning-200: #fae083;
	--color-warning-300: #f9d550;
	--color-warning-400: #f8cb2b;
	--color-warning-500: #f8c20e;
	--color-warning-600: #f8b404;
	--color-warning-700: #f8a100;
	--color-warning-800: #f89100;
	--color-warning-900: #f87200;

	/* Color - Success */
	--color-success-50: #e7f6e9;
	--color-success-100: #c5e9ca;
	--color-success-200: #9fdaa8;
	--color-success-300: #76cd85;
	--color-success-400: #56c26a;
	--color-success-500: #32b64f;
	--color-success-600: #28a746;
	--color-success-700: #1a953a;
	--color-success-800: #0a842f;
	--color-success-900: #00641b;

	/* Color - Info */
	--color-info-50: #e3f1fe;
	--color-info-100: #bcdcfe;
	--color-info-200: #91c7fe;
	--color-info-300: #65b1fc;
	--color-info-400: #46a1fc;
	--color-info-500: #2e91fa;
	--color-info-600: #2f82eb;
	--color-info-700: #2d70d8;
	--color-info-800: #2a5fc5;
	--color-info-900: #2640a6;

	/* Semantic Colors */
	--color-text-primary: var(--color-neutral-900);
	--color-text-secondary: var(--color-neutral-600);
	--color-text-muted: var(--color-neutral-400);
	--color-text-inverse: var(--color-neutral-white);

	--color-border: var(--color-neutral-200);
	--color-border-light: var(--color-neutral-100);
	--color-border-dark: var(--color-neutral-300);

	--color-background: var(--color-neutral-white);
	--color-background-light: var(--color-neutral-50);
	--color-background-dark: var(--color-neutral-100);

	/* Alert Colors */
	--color-alert-success: var(--color-success-600);
	--color-alert-success-bg: var(--color-success-50);
	--color-alert-success-border: var(--color-success-200);

	--color-alert-info: var(--color-info-500);
	--color-alert-info-bg: var(--color-info-50);
	--color-alert-info-border: var(--color-info-200);

	--color-alert-warning: var(--color-warning-700);
	--color-alert-warning-bg: var(--color-warning-50);
	--color-alert-warning-border: var(--color-warning-200);

	--color-alert-danger: var(--color-danger-700);
	--color-alert-danger-bg: var(--color-danger-50);
	--color-alert-danger-border: var(--color-danger-200);

	/* Typography */
	--font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	--font-size-xs: 12px;
	--font-size-sm: 14px;
	--font-size-md: 16px;
	--font-size-lg: 20px;
	--font-size-xl: 24px;
	--font-size-2xl: 32px;
	--font-size-3xl: 36px;
	--font-size-4xl: 48px;
	--font-size-5xl: 60px;

	--font-size-display: 60px;
	--font-size-h1: 48px;
	--font-size-h2: 36px;
	--font-size-h3: 32px;
	--font-size-h4: 24px;
	--font-size-h5: 20px;
	--font-size-h6: 16px;

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

	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.6;

	/* Spacing */
	--spacing-px: 1px;
	--spacing-0: 0;
	--spacing-1: 4px;
	--spacing-2: 8px;
	--spacing-3: 12px;
	--spacing-4: 16px;
	--spacing-5: 20px;
	--spacing-6: 24px;
	--spacing-7: 28px;
	--spacing-8: 32px;
	--spacing-9: 36px;
	--spacing-10: 40px;
	--spacing-11: 44px;
	--spacing-12: 48px;
	--spacing-14: 56px;
	--spacing-16: 64px;
	--spacing-20: 80px;
	--spacing-24: 96px;
	--spacing-25: 100px;

	/* Border Radius */
	--radius-none: 0;
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Transitions */
	--transition-fast: 150ms;
	--transition-base: 200ms;
	--transition-slow: 300ms;
	--transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* Z-Index */
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	--z-toast: 1080;

	/* Input */
	--input-height-sm: 36px;
	--input-height-md: 40px;
	--input-height-lg: 48px;
	--input-border-radius: var(--radius-sm);

	/* Button */
	--btn-height-sm: 32px;
	--btn-height-md: 40px;
	--btn-height-lg: 48px;
	--btn-border-radius-sm: var(--radius-xs);
	--btn-border-radius-md: var(--radius-sm);
	--btn-border-radius-lg: var(--radius-lg);

	/* Builder */
	--builder-sidebar-width: 280px;
	--builder-toolbar-height: 48px;
}