/* ============================================
   CSS变量定义 - 科学护眼配色方案 V2.0
   基于眼科学原理和UI设计最佳实践
   ============================================ */

:root {
    /* ========== 日间模式 - 仿纸张温暖配色 ========== */
    
    /* 背景色系（仿纸张，减少蓝光刺激） */
    --bg-gradient: linear-gradient(135deg, #fdfbf7 0%, #f8f6f1 100%);
    --container-bg: #fffef9;          /* 主容器 - 暖白色 */
    --card-bg: #ffffff;                /* 卡片 - 纯白提升层次 */
    --hover-bg: #f5f3ed;               /* 悬停 - 淡米黄 */
    --active-bg: #ebe9e0;              /* 激活 - 稍深米黄 */
    
    /* 文字色系（避免纯黑，降低对比度冲击） */
    --text-primary: #2c3440;           /* 主文字 - 深灰蓝 */
    --text-secondary: #5a6c7d;         /* 次要文字 - 中灰蓝 */
    --text-tertiary: #8896a4;          /* 辅助文字 - 浅灰蓝 */
    --text-disabled: #b4bcc4;          /* 禁用文字 */
    
    /* 强调色系（柔和蓝紫，减少视觉疲劳） */
    --accent-primary: #5b7fe6;         /* 主强调 - 柔和蓝 */
    --accent-secondary: #7e6ac9;       /* 次强调 - 柔和紫 */
    --accent-light: #e8edfb;           /* 浅色背景 */
    --accent-gradient: linear-gradient(120deg, #5b7fe6 0%, #7e6ac9 100%);
    
    /* 功能色系（调整饱和度，更舒适） */
    --success: #10b981;                /* 成功 - 绿 */
    --success-light: #d1fae5;
    --warning: #f59e0b;                /* 警告 - 橙 */
    --warning-light: #fef3c7;
    --error: #ef4444;                  /* 错误 - 红 */
    --error-light: #fee2e2;
    --info: #3b82f6;                   /* 信息 - 蓝 */
    --info-light: #dbeafe;
    
    /* 边框和分割线 */
    --border-light: #eae8e1;           /* 浅边框 */
    --border-normal: #d1cfc5;          /* 常规边框 */
    --border-strong: #b3b0a5;          /* 强边框 */
    
    /* 阴影（营造立体层次感） */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    
    /* 圆角系统 */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;
    
    /* 间距系统（8的倍数） */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    
    /* 字体系统 */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", 
                 "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    --font-serif: "Georgia", "Source Serif Pro", "Times New Roman", serif;
    --font-mono: "SF Mono", "Monaco", "Consolas", "Liberation Mono", monospace;
    
    /* 字号系统 */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    
    /* 行高系统 */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    --leading-loose: 2;
    
    /* 过渡动画 */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
    /* ========== 夜间模式 - 低蓝光暖色护眼配色 ========== */
    
    /* 背景色系（深暖灰蓝，避免纯黑和冷蓝光） */
    --bg-gradient: linear-gradient(135deg, #1c1e2a 0%, #20222f 100%);
    --container-bg: #25283a;           /* 主容器 - 暖深灰 */
    --card-bg: #2c2f45;                /* 卡片 - 稍亮灰 */
    --hover-bg: #33374f;               /* 悬停 - 中亮灰 */
    --active-bg: #3d425c;              /* 激活 - 更亮灰 */
    
    /* 文字色系（柔和偏暖，避免纯白刺眼） */
    --text-primary: #eef0f8;           /* 主文字 - 柔白 */
    --text-secondary: #b5b9ca;         /* 次要文字 - 中灰 */
    --text-tertiary: #868b9e;          /* 辅助文字 - 深灰 */
    --text-disabled: #5a5f70;          /* 禁用文字 */
    
    /* 强调色系（降低饱和度，提高可读性） */
    --accent-primary: #8b9eff;         /* 主强调 - 淡蓝 */
    --accent-secondary: #a68eff;       /* 次强调 - 淡紫 */
    --accent-light: #2d3350;           /* 浅色背景 */
    --accent-gradient: linear-gradient(120deg, #8b9eff 0%, #a68eff 100%);
    
    /* 功能色系（暖色调，降低蓝光刺激） */
    --success: #34d399;                /* 成功 - 亮绿 */
    --success-light: #1a3530;
    --warning: #fbbf24;                /* 警告 - 亮橙 */
    --warning-light: #332a1a;
    --error: #f87171;                  /* 错误 - 亮红 */
    --error-light: #3a2626;
    --info: #60a5fa;                   /* 信息 - 亮蓝 */
    --info-light: #1e2d42;
    
    /* 边框和分割线 */
    --border-light: #343848;           /* 浅边框 */
    --border-normal: #3f4458;          /* 常规边框 */
    --border-strong: #4d5268;          /* 强边框 */
    
    /* 阴影（深色模式更重） */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.7);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.8);
}

/* ========== 通用工具类 ========== */

/* 文字对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 文字大小 */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

/* 文字颜色 */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

/* 间距 */
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }

/* 圆角 */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* 阴影 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }