:root {
    --header-height: 64px;
    --sidebar-width: 224px;
    --sidebar-collapsed-width: 72px;
    --creator-width: 432px;
    --color-canvas: #f4f6fa;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-surface-raised: #ffffff;
    --color-text: #101828;
    --color-text-secondary: #475467;
    --color-text-muted: #7c8798;
    --color-border: #e4e7ec;
    --color-border-strong: #d0d5dd;
    --color-primary: #635bff;
    --color-primary-hover: #5048e5;
    --color-primary-soft: #f0efff;
    --color-success: #087a55;
    --color-warning: #b54708;
    --color-error: #b42318;
    --color-info: #175cd3;
    --brand-gradient: #635bff;
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --shadow-sm: 0 1px 2px rgb(16 24 40 / 5%);
    --shadow-md: 0 8px 24px rgb(16 24 40 / 8%);
    --shadow-lg: 0 20px 56px rgb(16 24 40 / 18%);
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --duration-fast: 140ms;
    --duration-normal: 220ms;
    --z-header: 100;
    --z-drawer: 700;
    --z-modal: 1000;
    --z-toast: 1200;
}

:root[data-theme="dark"] {
    --color-canvas: #0c1018;
    --color-surface: #141a24;
    --color-surface-soft: #191f2b;
    --color-surface-raised: #202735;
    --color-text: #f4f6fb;
    --color-text-secondary: #c4cbd7;
    --color-text-muted: #8f9bad;
    --color-border: #293241;
    --color-border-strong: #3a4658;
    --color-primary: #8b8cf8;
    --color-primary-hover: #a2a3ff;
    --color-primary-soft: #24264a;
    --color-success: #56c596;
    --color-warning: #fdb366;
    --color-error: #ff8a80;
    --color-info: #84adff;
    --shadow-md: 0 10px 30px rgb(0 0 0 / 24%);
    --shadow-lg: 0 24px 64px rgb(0 0 0 / 45%);
}