/* CSS Variables - Elegant Dark/Light Theme */
:root {
  /* Colors - Dark Theme (Default) - Material Design inspired */
  /* Background layers - using deep grays, not pure black */
  --color-bg-primary: #121212;      /* 主背景 - 深灰黑 */
  --color-bg-secondary: #1e1e1e;    /* 次级背景 - 中灰黑 */
  --color-bg-tertiary: #2d2d2d;     /* 三级背景 - 浅灰黑 */
  --color-bg-elevated: #252525;     /* 浮层背景 */
  --color-bg-subtle: #1a1a1a;       /* 微妙背景 */
  
  /* Text colors - softer whites for better readability */
  --color-text-primary: #e0e0e0;    /* 主文字 - 柔白 */
  --color-text-secondary: #9e9e9e;  /* 次要文字 - 中灰 */
  --color-text-muted: #757575;      /* 弱化文字 - 深灰 */
  --color-text-inverse: #121212;    /* 反色文字 */
  
  /* Border colors - subtle separation */
  --color-border: #333333;          /* 边框 - 深灰 */
  --color-border-light: #2a2a2a;    /* 浅色边框 */
  --color-border-focus: #404040;    /* 聚焦边框 */
  
  /* Scrollbar colors - Light gray for night mode */
  --color-scrollbar: #666666;       /* 滚动条 - 亮灰色 */
  --color-scrollbar-hover: #888888; /* 滚动条悬停 - 更亮的灰色 */
  
  /* Accent color - elegant blue-purple */
  --color-accent: #8b9cf7;          /* 强调色 - 柔和蓝紫 */
  --color-accent-hover: #9dabff;    /* 悬停 */
  --color-accent-active: #7a8be6;   /* 激活 */
  --color-accent-light: rgba(139, 156, 247, 0.1);    /* 浅色强调 */
  --color-accent-ultra-light: rgba(139, 156, 247, 0.05);  /* 极浅强调 */
  
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  /* Danger colors */
  --color-danger: #ef4444;
  --color-danger-light: rgba(239, 68, 68, 0.1);
  --color-danger-dark: #dc2626;
  
  /* Accent variations */
  --color-accent-dark: #6d7de6;
  
  /* Gradient backgrounds */
  --gradient-primary: linear-gradient(135deg, #6d8cff 0%, #8da7ff 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(109, 140, 255, 0.05) 0%, transparent 100%);
  
  /* Spacing - Compact but comfortable */
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 12px;
  --spacing-lg: 18px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  
  /* Border Radius - Softer, more refined */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Shadows - Subtle and layered for depth */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.35), 0 6px 12px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 10px 20px rgba(0, 0, 0, 0.35);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.15);
  
  /* Transitions - Smooth and elegant */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --transition-smooth: 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* Font Families */
  --font-ui: "Microsoft YaHei UI", "微软雅黑 UI", "Segoe UI", sans-serif; /* UI 元素字体 */
  --font-body: "Microsoft YaHei", "微软雅黑", "Segoe UI", sans-serif;      /* 正文字体 */
  --font-code: "Consolas", "Monaco", "Courier New", monospace;              /* 代码字体 */
}

/* Global theme transition */
*, *::before, *::after {
  transition: background-color var(--transition-normal), 
              border-color var(--transition-normal), 
              color var(--transition-normal),
              box-shadow var(--transition-normal);
}

/* Light Theme - Soft and natural day mode */
[data-theme='light'] {
  /* Background layers - warm whites, not harsh white */
  --color-bg-primary: #fafafa;      /* 主背景 - 暖白 */
  --color-bg-secondary: #ffffff;    /* 次级背景 - 纯白 */
  --color-bg-tertiary: #f5f5f5;     /* 三级背景 - 浅灰 */
  --color-bg-elevated: #ffffff;     /* 浮层背景 */
  --color-bg-subtle: #f0f0f0;       /* 微妙背景 */
  
  /* Text colors - soft grays for comfortable reading */
  --color-text-primary: #2c2c2c;    /* 主文字 - 深灰 */
  --color-text-secondary: #666666;  /* 次要文字 - 中灰 */
  --color-text-muted: #999999;      /* 弱化文字 - 浅灰 */
  --color-text-inverse: #ffffff;    /* 反色文字 */
  
  /* Border colors - subtle separation */
  --color-border: #e0e0e0;          /* 边框 - 浅灰 */
  --color-border-light: #ebebeb;    /* 浅色边框 */
  --color-border-focus: #d0d0d0;    /* 聚焦边框 */
  
  /* Scrollbar colors - Slightly darker for day mode */
  --color-scrollbar: #999999;       /* 滚动条 - 中灰色 */
  --color-scrollbar-hover: #777777; /* 滚动条悬停 - 深灰色 */
  
  /* Accent color - consistent with dark theme */
  --color-accent: #7a8be6;          /* 强调色 */
  --color-accent-hover: #6a7bd6;    /* 悬停 */
  --color-accent-active: #5a6bc6;   /* 激活 */
  --color-accent-light: rgba(122, 139, 230, 0.08);    /* 浅色强调 */
  --color-accent-ultra-light: rgba(122, 139, 230, 0.04);  /* 极浅强调 */
  
  --gradient-primary: linear-gradient(135deg, #5b7fff 0%, #7c9cff 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(91, 127, 255, 0.03) 0%, transparent 100%);
  
  /* Danger colors - Light theme */
  --color-danger: #ef4444;
  --color-danger-light: rgba(239, 68, 68, 0.08);
  --color-danger-dark: #dc2626;
  
  /* Accent variations - Light theme */
  --color-accent-dark: #6a7bd6;
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.07), 0 6px 12px rgba(0, 0, 0, 0.05);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.08), 0 10px 20px rgba(0, 0, 0, 0.06);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.03);
}

/* ==================== Color Themes ==================== */

/* 方案一：仿纸暖黄（最经典护眼）*/
[data-color-theme='paper'] {
  --color-bg-primary: #F5ECD7;
  --color-bg-secondary: #F0EBE3;
  --color-bg-tertiary: #FBF8F2;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #EDE4D0; /* 比主背景略深 */
  
  --color-text-primary: #3E3A35;
  --color-text-secondary: #5A5650;
  --color-text-muted: #8B8580;
  --color-text-inverse: #F5ECD7;
  
  --color-border: #D9D0C1;
  --color-border-light: #E5DDD0;
  --color-border-focus: #C9C0B1;
  
  --color-accent: #8B9A6B;
  --color-accent-hover: #7A895A;
  --color-accent-active: #697849;
  --color-accent-light: rgba(139, 154, 107, 0.15);
  --color-accent-ultra-light: rgba(139, 154, 107, 0.08);
  
  --color-scrollbar: #B8B0A0;
  --color-scrollbar-hover: #9A9282;
  
  --gradient-primary: linear-gradient(135deg, #8B9A6B 0%, #A68B5B 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(139, 154, 107, 0.08) 0%, transparent 100%);
}

/* 方案二：现代清爽（极浅灰白）*/
[data-color-theme='modern'] {
  --color-bg-primary: #F8F8F8;
  --color-bg-secondary: #F2F2F2;
  --color-bg-tertiary: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #F0F0F0; /* 比主背景略深 */
  
  --color-text-primary: #2C2C2C;
  --color-text-secondary: #5A5A5A;
  --color-text-muted: #999999;
  --color-text-inverse: #F8F8F8;
  
  --color-border: #E0E0E0;
  --color-border-light: #EBEBEB;
  --color-border-focus: #D0D0D0;
  
  --color-accent: #4A9FB0;
  --color-accent-hover: #3A8FA0;
  --color-accent-active: #2A7F90;
  --color-accent-light: rgba(74, 159, 176, 0.12);
  --color-accent-ultra-light: rgba(74, 159, 176, 0.06);
  
  --color-scrollbar: #BBBBBB;
  --color-scrollbar-hover: #999999;
  
  --gradient-primary: linear-gradient(135deg, #4A9FB0 0%, #5B8FB0 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(74, 159, 176, 0.05) 0%, transparent 100%);
}

/* 方案三：夜间暗色（黑底灰字）*/
[data-color-theme='dark'] {
  --color-bg-primary: #1E1E1E;
  --color-bg-secondary: #252526;
  --color-bg-tertiary: #2D2D30;
  --color-bg-elevated: #333336;
  --color-bg-subtle: #252526; /* 比主背景略亮 */
  
  --color-text-primary: #BDBBB6;
  --color-text-secondary: #9E9E9E;
  --color-text-muted: #757575;
  --color-text-inverse: #1E1E1E;
  
  --color-border: #3E3E40;
  --color-border-light: #333335;
  --color-border-focus: #4E4E50;
  
  --color-accent: #D4A76A;
  --color-accent-hover: #C4975A;
  --color-accent-active: #B4874A;
  --color-accent-light: rgba(212, 167, 106, 0.15);
  --color-accent-ultra-light: rgba(212, 167, 106, 0.08);
  
  --color-scrollbar: #666666;
  --color-scrollbar-hover: #888888;
  
  --gradient-primary: linear-gradient(135deg, #D4A76A 0%, #6A8CA8 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(212, 167, 106, 0.05) 0%, transparent 100%);
}

/* 方案四：豆沙绿（自然疗愈）*/
[data-color-theme='green'] {
  --color-bg-primary: #DCE5D9;
  --color-bg-secondary: #E8EFE6;
  --color-bg-tertiary: #F4F9F2;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #D0D9CD; /* 比主背景略深 */
  
  --color-text-primary: #2B3330;
  --color-text-secondary: #4A5550;
  --color-text-muted: #7A8580;
  --color-text-inverse: #DCE5D9;
  
  --color-border: #C0CFBB;
  --color-border-light: #D0DFCB;
  --color-border-focus: #B0BFAB;
  
  --color-accent: #7D9B7A;
  --color-accent-hover: #6D8B6A;
  --color-accent-active: #5D7B5A;
  --color-accent-light: rgba(125, 155, 122, 0.15);
  --color-accent-ultra-light: rgba(125, 155, 122, 0.08);
  
  --color-scrollbar: #A0B09D;
  --color-scrollbar-hover: #889885;
  
  --gradient-primary: linear-gradient(135deg, #7D9B7A 0%, #6E8B6B 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(125, 155, 122, 0.08) 0%, transparent 100%);
}