/* ============================================
   variables.css - CSS变量统一管理
   所有页面的颜色、间距、字体等变量都在这里定义
   ============================================ */

/* ===== 基础变量（不受主题影响） ===== */
:root {
    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* 阴影 */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    
    /* 过渡 */
    --transition: all 0.25s ease;
    
    /* 字体 */
    --font-base: 16px;
    --font-sm: 14px;
    --font-lg: 18px;
    --font-xl: 24px;
    
    /* 间距（4px基准） */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
     /* 编辑器特有 */
    --font-size: 18px;
    --line-height: 1.8;
    --custom-font: inherit;
    --content-opacity: 0.85;
    --letter-spacing: 0px;
    --grid-line-color: rgba(128, 128, 128, 0.08);
}

/* ===== 主题变量 ===== */
:root,
[data-theme="light"] {
    --app-bg: #f8f9fa;
    --card-bg: #ffffff;
    --sidebar-bg: #f8f9fa;
    --text-primary: #343a40;
    --text-secondary: #6c757d;
    --border-color: #e9ecef;
    --theme-primary: #4361ee;
    --theme-primary-rgb: 67, 97, 238;
    --header-bg: #ffffff;
    --table-hover: #f1f3f5;
    --reader-bg: #f8f9fa;
    --editor-bg: #fafafa;
    --hover-bg: rgba(67, 97, 238, 0.08);
    
    /* 兼容旧变量名 */
    --bg-color: var(--app-bg);
    --text-color: var(--text-primary);
    --sidebar-border: var(--border-color);
    --primary-color: var(--theme-primary);
    --primary-color-rgb: var(--theme-primary-rgb);
    --secondary-color: var(--text-secondary);
    --hover-color: var(--theme-primary);
    --card-shadow: var(--shadow-sm);
    --header-bg: var(--card-bg);
     /* 编辑器兼容变量 */
    --font-size: 18px;
    --line-height: 1.8;
}

[data-theme="dark"] {
    --app-bg: #121418;
    --card-bg: #1e222a;
    --sidebar-bg: #121418;
    --text-primary: #f1f3f5;
    --text-secondary: #adb5bd;
    --border-color: #2d333b;
    --theme-primary: #81a1fe;
    --theme-primary-rgb: 129, 161, 254;
    --header-bg: #121418;
    --table-hover: #252a34;
    --reader-bg: #121418;
    --editor-bg: #1e222a;
    --hover-bg: rgba(129, 161, 254, 0.12);
    
    /* 兼容旧变量名 */
    --bg-color: var(--app-bg);
    --text-color: var(--text-primary);
    --sidebar-border: var(--border-color);
    --primary-color: var(--theme-primary);
    --primary-color-rgb: var(--theme-primary-rgb);
    --secondary-color: var(--text-secondary);
    --hover-color: var(--theme-primary);
    --card-shadow: var(--shadow-sm);
    --header-bg: var(--card-bg);
     /* 编辑器兼容变量 */
    --font-size: 18px;
    --line-height: 1.8;
}

[data-theme="eyecare"] {
    --app-bg: #f2f8f4;
    --card-bg: #ffffff;
    --sidebar-bg: #f2f8f4;
    --text-primary: #2d5d45;
    --text-secondary: #5c7c6c;
    --border-color: #d5e6d9;
    --theme-primary: #347d56;
    --theme-primary-rgb: 52, 125, 86;
    --header-bg: #f2f8f4;
    --table-hover: #e8f2ed;
    --reader-bg: #f2f8f4;
    --editor-bg: #f2f8f4;
    --hover-bg: rgba(52, 125, 86, 0.1);
    
    /* 兼容旧变量名 */
    --bg-color: var(--app-bg);
    --text-color: var(--text-primary);
    --sidebar-border: var(--border-color);
    --primary-color: var(--theme-primary);
    --primary-color-rgb: var(--theme-primary-rgb);
    --secondary-color: var(--text-secondary);
    --hover-color: var(--theme-primary);
    --card-shadow: var(--shadow-sm);
    --header-bg: var(--card-bg);
     /* 编辑器兼容变量 */
    --font-size: 18px;
    --line-height: 1.8;
}

[data-theme="paper"] {
    --app-bg: #f5f0e6;
    --card-bg: #f5f0e6;
    --sidebar-bg: #f5f0e6;
    --text-primary: #4a3f36;
    --text-secondary: #826a5f;
    --border-color: #d9cbb9;
    --theme-primary: #9c7b66;
    --theme-primary-rgb: 156, 123, 102;
    --header-bg: #f5f0e6;
    --table-hover: #e6ddd0;
    --reader-bg: #e9e2d5;
    --editor-bg: #f5f0e6;
    --hover-bg: rgba(156, 123, 102, 0.1);
    
    /* 兼容旧变量名 */
    --bg-color: var(--app-bg);
    --text-color: var(--text-primary);
    --sidebar-border: var(--border-color);
    --primary-color: var(--theme-primary);
    --primary-color-rgb: var(--theme-primary-rgb);
    --secondary-color: var(--text-secondary);
    --hover-color: var(--theme-primary);
    --card-shadow: var(--shadow-sm);
    --header-bg: var(--card-bg);
     /* 编辑器兼容变量 */
    --font-size: 18px;
    --line-height: 1.8;
}

/* editor.html 独有的两种主题 */
[data-theme="parchment"] {
    --app-bg: #f5e9d0;
    --card-bg: #f5e9d0;
    --sidebar-bg: #f5e9d0;
    --text-primary: #3e2e21;
    --text-secondary: #8b7355;
    --border-color: #d4c4a8;
    --theme-primary: #8b4513;
    --theme-primary-rgb: 139, 69, 19;
    --header-bg: #f5e9d0;
    --table-hover: #ede1c5;
    --reader-bg: #f5e9d0;
    --editor-bg: #f5e9d0;
    --hover-bg: rgba(139, 69, 19, 0.1);
    
    --bg-color: var(--app-bg);
    --text-color: var(--text-primary);
    --sidebar-border: var(--border-color);
    --primary-color: var(--theme-primary);
    --primary-color-rgb: var(--theme-primary-rgb);
    --secondary-color: var(--text-secondary);
    --hover-color: var(--theme-primary);
    --card-shadow: var(--shadow-sm);
    --header-bg: var(--card-bg);
     /* 编辑器兼容变量 */
    --font-size: 18px;
    --line-height: 1.8;
}

[data-theme="springFestival"] {
    --app-bg: #fff5f0;
    --card-bg: #fff5f0;
    --sidebar-bg: #fff5f0;
    --text-primary: #5c2e1a;
    --text-secondary: #c0392b;
    --border-color: #f0d5c8;
    --theme-primary: #d62c2c;
    --theme-primary-rgb: 214, 44, 44;
    --header-bg: #fff5f0;
    --table-hover: #fce8e0;
    --reader-bg: #fff5f0;
    --editor-bg: #fff5f0;
    --hover-bg: rgba(214, 44, 44, 0.1);
    
    --bg-color: var(--app-bg);
    --text-color: var(--text-primary);
    --sidebar-border: var(--border-color);
    --primary-color: var(--theme-primary);
    --primary-color-rgb: var(--theme-primary-rgb);
    --secondary-color: var(--text-secondary);
    --hover-color: var(--theme-primary);
    --card-shadow: var(--shadow-sm);
    --header-bg: var(--card-bg);
     /* 编辑器兼容变量 */
    --font-size: 18px;
    --line-height: 1.8;
}