:root {
    /* 默认颜色变量 */
    --primary-h: 220;
    --primary-s: 89%;
    --primary-l: 53%;
    --secondary-h: 40;
    --secondary-s: 89%;
    --secondary-l: 53%;
    --accent-h: 320;
    --accent-s: 75%;
    --accent-l: 55%;
    
    /* 语义颜色基于主色调整 - 这些值会被JavaScript动态覆盖 */
    --info-h: calc(var(--primary-h) + 20);
    --info-s: calc(var(--primary-s) - 10%);
    --info-l: var(--primary-l);
    
    --success-h: calc(var(--primary-h) + 120);
    --success-s: calc(var(--primary-s) - 15%);
    --success-l: calc(var(--primary-l) + 5%);
    
    --warning-h: calc(var(--primary-h) + 40);
    --warning-s: var(--primary-s);
    --warning-l: calc(var(--primary-l) + 10%);
    
    --error-h: 0;
    --error-s: calc(var(--primary-s) + 10%);
    --error-l: var(--primary-l);
    
    /* 生成的颜色变量 */
    --primary-color: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
    --primary-light: hsl(var(--primary-h), calc(var(--primary-s) - 15%), calc(var(--primary-l) + 15%));
    --primary-dark: hsl(var(--primary-h), calc(var(--primary-s) + 10%), calc(var(--primary-l) - 15%));
    
    --secondary-color: hsl(var(--secondary-h), var(--secondary-s), var(--secondary-l));
    --secondary-light: hsl(var(--secondary-h), calc(var(--secondary-s) - 20%), calc(var(--secondary-l) + 20%));
    --secondary-dark: hsl(var(--secondary-h), calc(var(--secondary-s) + 10%), calc(var(--secondary-l) - 15%));
    
    --accent-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
    --accent-light: hsl(var(--accent-h), calc(var(--accent-s) - 15%), calc(var(--accent-l) + 15%));
    --accent-dark: hsl(var(--accent-h), calc(var(--accent-s) + 10%), calc(var(--accent-l) - 15%));
    
    /* 语义颜色 */
    --info-color: hsl(var(--info-h), var(--info-s), var(--info-l));
    --info-light: hsl(var(--info-h), calc(var(--info-s) - 20%), calc(var(--info-l) + 20%));
    --info-dark: hsl(var(--info-h), calc(var(--info-s) + 15%), calc(var(--info-l) - 15%));
    
    --success-color: hsl(var(--success-h), var(--success-s), var(--success-l));
    --success-light: hsl(var(--success-h), calc(var(--success-s) - 20%), calc(var(--success-l) + 20%));
    --success-dark: hsl(var(--success-h), calc(var(--success-s) + 15%), calc(var(--success-l) - 15%));
    
    --warning-color: hsl(var(--warning-h), var(--warning-s), var(--warning-l));
    --warning-light: hsl(var(--warning-h), calc(var(--warning-s) - 20%), calc(var(--warning-l) + 20%));
    --warning-dark: hsl(var(--warning-h), calc(var(--warning-s) + 15%), calc(var(--warning-l) - 15%));
    
    --error-color: hsl(var(--error-h), var(--error-s), var(--error-l));
    --error-light: hsl(var(--error-h), calc(var(--error-s) - 20%), calc(var(--error-l) + 20%));
    --error-dark: hsl(var(--error-h), calc(var(--error-s) + 15%), calc(var(--error-l) - 15%));
    
    /* 中性色阶 */
    --neutral-50: hsl(var(--primary-h), 15%, 95%);
    --neutral-100: hsl(var(--primary-h), 15%, 90%);
    --neutral-200: hsl(var(--primary-h), 15%, 80%);
    --neutral-300: hsl(var(--primary-h), 15%, 70%);
    --neutral-400: hsl(var(--primary-h), 15%, 60%);
    --neutral-500: hsl(var(--primary-h), 15%, 50%);
    --neutral-600: hsl(var(--primary-h), 15%, 40%);
    --neutral-700: hsl(var(--primary-h), 15%, 30%);
    --neutral-800: hsl(var(--primary-h), 15%, 20%);
    --neutral-900: hsl(var(--primary-h), 15%, 10%);
    
    /* 文字颜色 */
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --text-inverse: var(--neutral-50);
    
    /* 背景颜色 */
    --bg-primary: white;
    --bg-secondary: var(--neutral-100);
    --bg-tertiary: var(--neutral-200);
    
    /* 渐变背景 */
    --bg-gradient-primary: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    --bg-gradient-header: linear-gradient(135deg, hsl(37.93deg 89% 61%) 0%, hsl(319deg 89% 61%) 100%);
    
    /* 边框颜色 */
    --border-color: var(--neutral-300);
    
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 圆角 */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* 间距 */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* RGB颜色变量（用于半透明效果） */
    --primary-color-rgb: 45, 104, 243;
    --secondary-color-rgb: 243, 180, 45;
    --accent-color-rgb: 224, 58, 163;
    --info-color-rgb: 64, 124, 255;
    --success-color-rgb: 46, 204, 113;
    --warning-color-rgb: 255, 159, 67;
    --error-color-rgb: 255, 77, 77;
}

.dark-mode {
    /* 文字颜色 - 在暗模式下使用浅色文字 */
    --text-primary: var(--neutral-50);
    --text-secondary: var(--neutral-200);
    --text-inverse: var(--neutral-900);
    
    /* 背景颜色 - 使用深色背景 */
    --bg-primary: var(--neutral-900);
    --bg-secondary: var(--neutral-800);
    --bg-tertiary: var(--neutral-700);
    
    /* 边框颜色 */
    --border-color: var(--neutral-600);
    
    /* 阴影 - 在暗模式下使用更深的阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    
    /* 暗色主题渐变背景 */
    --bg-gradient-primary: linear-gradient(135deg, hsl(var(--primary-h), 70%, 30%) 0%, hsl(calc(var(--primary-h) + 120), 70%, 30%) 100%);
    --bg-gradient-header: linear-gradient(135deg, hsl(var(--secondary-h), 70%, 30%) 0%, hsl(var(--accent-h), 70%, 30%) 100%);
    
    /* 暗模式下的中性色阶优化 - 反转亮模式的色阶 */
    --neutral-50: hsl(var(--primary-h), 15%, 10%);
    --neutral-100: hsl(var(--primary-h), 15%, 15%);
    --neutral-200: hsl(var(--primary-h), 15%, 20%);
    --neutral-300: hsl(var(--primary-h), 15%, 30%);
    --neutral-400: hsl(var(--primary-h), 15%, 40%);
    --neutral-500: hsl(var(--primary-h), 15%, 50%);
    --neutral-600: hsl(var(--primary-h), 15%, 60%);
    --neutral-700: hsl(var(--primary-h), 15%, 70%);
    --neutral-800: hsl(var(--primary-h), 15%, 80%);
    --neutral-900: hsl(var(--primary-h), 15%, 90%);
    
    /* 暗模式下的语义颜色优化 - 降低饱和度，提高可读性 */
    --info-color: hsl(var(--info-h), calc(var(--info-s) - 20%), calc(var(--info-l) + 10%));
    --info-light: hsl(var(--info-h), calc(var(--info-s) - 30%), calc(var(--info-l) + 20%));
    --info-dark: hsl(var(--info-h), calc(var(--info-s) - 10%), calc(var(--info-l) - 5%));
    
    --success-color: hsl(var(--success-h), calc(var(--success-s) - 20%), calc(var(--success-l) + 10%));
    --success-light: hsl(var(--success-h), calc(var(--success-s) - 30%), calc(var(--success-l) + 20%));
    --success-dark: hsl(var(--success-h), calc(var(--success-s) - 10%), calc(var(--success-l) - 5%));
    
    --warning-color: hsl(var(--warning-h), calc(var(--warning-s) - 15%), calc(var(--warning-l) + 5%));
    --warning-light: hsl(var(--warning-h), calc(var(--warning-s) - 25%), calc(var(--warning-l) + 15%));
    --warning-dark: hsl(var(--warning-h), calc(var(--warning-s) - 5%), calc(var(--warning-l) - 10%));
    
    --error-color: hsl(var(--error-h), calc(var(--error-s) - 10%), calc(var(--error-l) + 5%));
    --error-light: hsl(var(--error-h), calc(var(--error-s) - 20%), calc(var(--error-l) + 15%));
    --error-dark: hsl(var(--error-h), var(--error-s), calc(var(--error-l) - 10%));
}