:root {
    /* 主题变量 */
    --is-dark-theme: 0;

    /* 颜色变量 */
    --primary-color: #4B5FE1;
    --primary-color-dark: #3B4FCF;
    --primary-color-rgb: 75, 95, 225;
    
    /* 亮色主题 */
    --light-background-color: #ffffff;
    --light-text-color: #1f2937;
    --light-text-color-light: #64748b;
    --light-text-color-lighter: #6b7280;
    --light-border-color: #e5e7eb;
    --light-hover-color: #EEF2FF;
    --light-bg-light: #f8fafc;
    --light-bg-lighter: #f1f5f9;
    --light-bg-lightest: #f9fafb;

    /* 深色主题 */
    --dark-background-color: #1a1b1e;
    --dark-text-color: #e5e7eb;
    --dark-text-color-light: #9ca3af;
    --dark-text-color-lighter: #6b7280;
    --dark-border-color: #374151;
    --dark-hover-color: #2d2f35;
    --dark-bg-light: #242529;
    --dark-bg-lighter: #2a2b30;
    --dark-bg-lightest: #323438;

    /* 深色主题表单元素 */
    --dark-input-bg: #242529;
    --dark-input-text: #e5e7eb;
    --dark-input-border: #374151;
    --dark-input-hover-bg: #2a2b30;
    --dark-input-hover-border: #4b5563;
    --dark-input-focus-bg: #2d2f35;
    --dark-input-focus-border: #6b7280;
    --dark-input-placeholder: #6b7280;
    
    --dark-button-bg: #2d2f35;
    --dark-button-text: #e5e7eb;
    --dark-button-border: #374151;
    --dark-button-hover-bg: #374151;
    --dark-button-hover-text: #f3f4f6;
    --dark-button-hover-border: #4b5563;
    --dark-button-active-bg: #4b5563;
    --dark-button-active-text: #f9fafb;
    --dark-button-active-border: #6b7280;
    --dark-button-disabled-bg: #1f2937;
    --dark-button-disabled-text: #6b7280;
    --dark-button-disabled-border: #374151;

    /* 动态主题颜色 */
    --background-color: var(--light-background-color);
    --text-color: var(--light-text-color);
    --text-color-light: var(--light-text-color-light);
    --text-color-lighter: var(--light-text-color-lighter);
    --border-color: var(--light-border-color);
    --hover-color: var(--light-hover-color);
    --bg-light: var(--light-bg-light);
    --bg-lighter: var(--light-bg-lighter);
    --bg-lightest: var(--light-bg-lightest);
    
    /* 布局变量 */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 60px;
    --header-height: 64px;
    
    /* 间距变量 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    
    /* 字体大小变量 */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    
    /* 圆角变量 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* 阴影变量 */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 过渡变量 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    
    /* 错误状态颜色 */
    --error-color: #dc2626;
    --error-color-light: #ef4444;
    --error-color-dark: #b91c1c;
    
    /* 表单元素 - 亮色主题 */
    --light-input-bg: #ffffff;
    --light-input-text: #1f2937;
    --light-input-border: #e5e7eb;
    --light-input-hover-bg: #f9fafb;
    --light-input-hover-border: #d1d5db;
    --light-input-focus-bg: #ffffff;
    --light-input-focus-border: #4B5FE1;
    --light-input-placeholder: #9ca3af;
    
    --light-button-bg: #f3f4f6;
    --light-button-text: #1f2937;
    --light-button-border: #e5e7eb;
    --light-button-hover-bg: #e5e7eb;
    --light-button-hover-text: #111827;
    --light-button-hover-border: #d1d5db;
    --light-button-active-bg: #d1d5db;
    --light-button-active-text: #111827;
    --light-button-active-border: #9ca3af;
    --light-button-disabled-bg: #f9fafb;
    --light-button-disabled-text: #9ca3af;
    --light-button-disabled-border: #e5e7eb;
    
    /* 表单元素动态主题 */
    --input-bg: var(--light-input-bg);
    --input-text: var(--light-input-text);
    --input-border: var(--light-input-border);
    --input-hover-bg: var(--light-input-hover-bg);
    --input-hover-border: var(--light-input-hover-border);
    --input-focus-bg: var(--light-input-focus-bg);
    --input-focus-border: var(--light-input-focus-border);
    --input-placeholder: var(--light-input-placeholder);

    @media (prefers-color-scheme: dark) {
        --input-bg: var(--dark-input-bg);
        --input-text: var(--dark-input-text);
        --input-border: var(--dark-input-border);
        --input-hover-bg: var(--dark-input-hover-bg);
        --input-hover-border: var(--dark-input-hover-border);
        --input-focus-bg: var(--dark-input-focus-bg);
        --input-focus-border: var(--dark-input-focus-border);
        --input-placeholder: var(--dark-input-placeholder);
    }
    
    --button-bg: var(--light-button-bg);
    --button-text: var(--light-button-text);
    --button-border: var(--light-button-border);
    --button-hover-bg: var(--light-button-hover-bg);
    --button-hover-text: var(--light-button-hover-text);
    --button-hover-border: var(--light-button-hover-border);
    --button-active-bg: var(--light-button-active-bg);
    --button-active-text: var(--light-button-active-text);
    --button-active-border: var(--light-button-active-border);
    --button-disabled-bg: var(--light-button-disabled-bg);
    --button-disabled-text: var(--light-button-disabled-text);
    --button-disabled-border: var(--light-button-disabled-border);
    --light-error-color: #ef4444;
    --light-error-bg: #fee2e2;
    --light-error-border: #fecaca;
    --dark-error-color: #f87171;
    --dark-error-bg: #7f1d1d;
    --dark-error-border: #991b1b;
    --error-color: var(--light-error-color);
    --error-bg: var(--light-error-bg);
    --error-border: var(--light-error-border);
}