@theme {
    /* primary */
    --color-i-primary-1: #e6f4ff;
    --color-i-primary-2: #bae0ff;
    --color-i-primary-3: #91caff;
    --color-i-primary-4: #69b1ff;
    --color-i-primary-5: #4096ff;
    --color-i-primary-6: #1677ff;
    --color-i-primary-7: #0958d9;
    --color-i-primary-8: #4096ff;
    --color-i-primary-9: #1677ff;
    --color-i-primary-10: #0958d9;

    /* success */
    --color-i-success-1: #f6ffed;
    --color-i-success-2: #d9f7be;
    --color-i-success-3: #b7eb8f;
    --color-i-success-4: #95de64;
    --color-i-success-5: #73d13d;
    --color-i-success-6: #52c41a;
    --color-i-success-7: #389e0d;
    --color-i-success-8: #73d13d;
    --color-i-success-9: #52c41a;
    --color-i-success-10: #389e0d;

    /* warning */
    --color-i-warning-1: #fffbe6;
    --color-i-warning-2: #fff1b8;
    --color-i-warning-3: #ffe58f;
    --color-i-warning-4: #ffd666;
    --color-i-warning-5: #ffc53d;
    --color-i-warning-6: #faad14;
    --color-i-warning-7: #d48806;
    --color-i-warning-8: #ffc53d;
    --color-i-warning-9: #faad14;
    --color-i-warning-10: #d48806;

    /* error */
    --color-i-error-1: #fff2f0;
    --color-i-error-2: #fff1f0;
    --color-i-error-3: #ffccc7;
    --color-i-error-4: #ffa39e;
    --color-i-error-5: #ff7875;
    --color-i-error-6: #ff4d4f;
    --color-i-error-7: #d9363e;
    --color-i-error-8: #ff7875;
    --color-i-error-9: #ff4d4f;
    --color-i-error-10: #d9363e;

    /* info */
    --color-i-info-1: #e6f4ff;
    --color-i-info-2: #bae0ff;
    --color-i-info-3: #91caff;
    --color-i-info-4: #69b1ff;
    --color-i-info-5: #4096ff;
    --color-i-info-6: #1677ff;
    --color-i-info-7: #0958d9;
    --color-i-info-8: #4096ff;
    --color-i-info-9: #1677ff;
    --color-i-info-10: #0958d9;

    /* neutral */
    --color-i-1: rgba(0, 0, 0, 0.88);
    --color-i-2: rgba(0, 0, 0, 0.65);
    --color-i-3: rgba(0, 0, 0, 0.45);
    --color-i-4: rgba(0, 0, 0, 0.25);
    
    --color-i-fill-1: rgba(0, 0, 0, 0.15);
    --color-i-fill-2: rgba(0, 0, 0, 0.06);
    --color-i-fill-3: rgba(0, 0, 0, 0.04);
    --color-i-fill-4: rgba(0, 0, 0, 0.02);
    
    --background-color-i-layout: #f5f5f5;
    --background-color-i-container: #ffffff;
    --background-color-i-elevated: #ffffff;
    --background-color-i-spotlight: rgba(0, 0, 0, 0.85);
    
    --color-i-border-1: #d9d9d9;
    --color-i-border-2: #f0f0f0;

    --background-color-i-primary-bg: #e6f4ff;
    --background-color-i-primary-bg-hover: #bae0ff;
    --border-color-i-primary-border: #91caff;
    --border-color-i-primary-border-hover: #69b1ff;
    --color-i-primary-hover: #4096ff;
    --color-i-primary: #1677ff;
    --color-i-primary-active: #0958d9;
    --text-color-i-primary-hover: #4096ff;
    --text-color-i-primary: #1677ff;
    --text-color-i-primary-active: #0958d9;

    --background-color-i-success-bg: #f6ffed;
    --background-color-i-success-bg-hover: #d9f7be;
    --border-color-i-success-border: #b7eb8f;
    --border-color-i-success-border-hover: #95de64;
    --color-i-success-hover: #95de64;
    --color-i-success: #52c41a;
    --color-i-success-active: #389e0d;
    --text-color-i-success-hover: #73d13d;
    --text-color-i-success: #52c41a;
    --text-color-i-success-active: #389e0d;

    --background-color-i-warning-bg: #fffbe6;
    --background-color-i-warning-bg-hover: #fff1b8;
    --border-color-i-warning-border: #ffe58f;
    --border-color-i-warning-border-hover: #ffd666;
    --color-i-warning-hover: #ffd666;
    --color-i-warning: #faad14;
    --color-i-warning-active: #d48806;
    --text-color-i-warning-hover: #ffc53d;
    --text-color-i-warning: #faad14;
    --text-color-i-warning-active: #d48806;

    --background-color-i-error-bg: #fff2f0;
    --background-color-i-error-bg-hover: #fff1f0;
    --border-color-i-error-border: #ffccc7;
    --border-color-i-error-border-hover: #ffa39e;
    --color-i-error-hover: #ff7875;
    --color-i-error: #ff4d4f;
    --color-i-error-active: #d9363e;
    --text-color-i-error-hover: #ff7875;
    --text-color-i-error: #ff4d4f;
    --text-color-i-error-active: #d9363e;

    --background-color-i-info-bg: #e6f4ff;
    --background-color-i-info-bg-hover: #bae0ff;
    --border-color-i-info-border: #91caff;
    --border-color-i-info-border-hover: #69b1ff;
    --color-i-info-hover: #69b1ff;
    --color-i-info: #1677ff;
    --color-i-info-active: #0958d9;
    --text-color-i-info-hover: #4096ff;
    --text-color-i-info: #1677ff;
    --text-color-i-info-active: #0958d9;

    --color-i-white: #fff;
    --background-color-i-mask: rgba(0, 0, 0, 0.45);

    /* alias */
    --text-color-i-link: var(--text-color-i-info);
    --text-color-i-link-hover: var(--text-color-i-info-hover);
    --text-color-i-link-active: var(--text-color-i-info-active);
    
    /* background */
    --background-color-i-fill-content: var(--color-i-fill-2);
    --background-color-i-fill-content-hover: var(--color-i-fill-1);
    --background-color-i-fill-content-solid: #f0f0f0;
    --background-color-i-fill-alter: var(--color-i-fill-4);
    --background-color-i-fill-alter-solid: #fafafa;
    --background-color-i-container-disabled: var(--color-i-fill-3);
    
    /* split */
    --color-i-split: rgba(5, 5, 5, 0.06);
    
    /* text */
    --text-color-i-placeholder: var(--color-i-4);
    --text-color-i-disabled: var(--color-i-4);
    --text-color-i-heading: var(--color-i-1);
    --text-color-i-label: var(--color-i-2);
    --text-color-i-description: var(--color-i-3);
    --text-color-i-light-solid: var(--color-i-white);
    --text-color-i-highlight: var(--color-i-error);
    --background-color-i-text-hover: var(--color-i-fill-2);
    --background-color-i-text-active: var(--color-i-fill-1);
    
    --text-color-i-icon: var(--color-i-3);
    --text-color-i-icon-hover: var(--color-i-1);
    
    --outline-color-i-primary: rgba(5, 145, 255, 0.1);
    --outline-color-i-info: rgba(5, 145, 255, 0.1);
    --outline-color-i-success: rgba(142, 255, 30, 0.08);
    --outline-color-i-warning: rgba(255, 215, 5, 0.1);
    --outline-color-i-error: rgba(255, 38, 5, 0.06);
    
    --text-color-i-table-header-icon: rgba(0, 0, 0, 0.29);
    --text-color-i-table-header-icon-hover: rgba(0, 0, 0, 0.57);
    
    /* font family */
    --font-i-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Emoji, Helvetica, Arial, sans-serif;
    --font-i-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-i-mono: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    
    /* font size */
    --text-i-sm: 12px;
    --text-i: 14px;
    --text-i-lg: 16px;
    --text-i-xl: 20px;
    --text-i-heading-1: 30px;
    --text-i-heading-2: 24px;
    --text-i-heading-3: 20px;
    --text-i-heading-4: 16px;
    --text-i-heading-5: 14px;
    
    --leading-i-sm: 20px;
    --leading-i: 22px;
    --leading-i-lg: 24px;
    --leading-i-xl: 28px;
    
    --leading-i-heading-1: 38px;
    --leading-i-heading-2: 32px;
    --leading-i-heading-3: 28px;
    --leading-i-heading-4: 24px;
    --leading-i-heading-5: 22px;
    
    /* input inline width */
    --width-i-input-inline: 10rem;
    /* control */
    --width-i-line-width: 1px;
    --width-i-line-width-bold: 2px;
    --outline-width-i: 2px;
    /* checkbox size and expand icon size */
    --width-i-control-interactive: 16px;
    --width-i-control-interactive-lg: 18px;
    --width-i-control-interactive-sm: 14px;
    
    --background-color-i-control-item-hover: var(--color-i-fill-3);
    --background-color-i-control-item-active: var(--background-color-i-primary-bg);
    --background-color-i-control-item-active-hover: var(--background-color-i-primary-bg-hover);
    --background-color-i-control-item-active-disabled: var(--color-i-fill-1);
    --outline-color-i-control-tmp: var(--color-i-fill-4);
    --outline-color-i-control-primary: rgba(5, 145, 255, 0.1);
    --outline-color-i-control-success: rgba(142, 255, 30, 0.08);
    --outline-color-i-control-warning: rgba(255, 215, 5, 0.1);
    --outline-color-i-control-error: rgba(255, 38, 5, 0.06);
    
    --outline-offset-i: 1px;
    
    --line-type-i: solid;
    --radius-i: 6px;
    --radius-i-xs: 2px;
    --radius-i-sm: 4px;
    --radius-i-lg: 8px;
    --radius-i-full: 9999px;
    
    --font-weight-i-bold: 600;
    
    --opacity-i-loading: 0.65;
    
    --padding-i-control-horizontal: 12px;
    --padding-i-control-horizontal-sm: 8px;
    
    --padding-i-content-horizontal-lg: 24px;
    --padding-i-content-vertical-lg: 16px;
    --padding-i-content-horizontal: 16px;
    --padding-i-content-vertical: 12px;
    --padding-i-content-horizontal-sm: 16px;
    --padding-i-content-vertical-sm: 8px;
    
    --spacing-i-xxs: 4px;
    --spacing-i-xs: 8px;
    --spacing-i-sm: 12px;
    --spacing-i: 16px;
    --spacing-i-md: 20px;
    --spacing-i-lg: 24px;
    --spacing-i-xl: 32px;
    --spacing-i-xxl: 48px;
    
    --shadow-i-1: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
    --shadow-i-2: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    
    --shadow-i-popover-arrow: 3px 3px 7px rgba(0, 0, 0, 0.1);
    --shadow-i-card: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
    --shadow-i-drawer-right: -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);
    --shadow-i-drawer-left: 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);
    --shadow-i-drawer-up: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
    --shadow-i-drawer-down: 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);
    --shadow-i-tabs-overflow-left: inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);
    --shadow-i-tabs-overflow-right: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
    --shadow-i-tabs-overflow-top: inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);
    --shadow-i-tabs-overflow-bottom: inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);

    /* sizes */
    --size-i-xxl: 48px;
    --size-i-xl: 32px;
    --size-i-lg: 24px;
    --size-i-md: 20px;
    --size-i-ms: 16px;
    --size-i: 16px;
    --size-i-sm: 12px;
    --size-i-xs: 8px;
    --size-i-xxs: 4px;

    /* control heights */
    --leading-i-control-height-sm: 24px;
    --leading-i-control-height-xs: 16px;
    --leading-i-control-height-lg: 40px;
    --leading-i-control-height: 32px;

    /* heights */
    --height-i-control-height-sm: 24px;
    --height-i-control-height-xs: 16px;
    --height-i-control-height-lg: 40px;
    --height-i-control-height: 32px;

    /* widths */
    --width-i-control-height-sm: 24px;
    --width-i-control-height-xs: 16px;
    --width-i-control-height-lg: 40px;
    --width-i-control-height: 32px;

    /* durations */
    --transition-duration-i-fast: 0.1s;
    --transition-duration-i-mid: 0.2s;
    --transition-duration-i-slow: 0.3s;
    
    --border-width-i: 1px;
    --border-width-i-bold: 2px;
    
    --ease-i-out-circle: cubic-bezier(0.08, 0.82, 0.17, 1);
    --ease-i-in-out-circle: cubic-bezier(0.78, 0.14, 0.15, 0.86);
    --ease-i-out: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-i-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-i-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
    --ease-i-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
    --ease-i-in-quint: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-i-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}