/**
 * ============================================
 * 文件：theme.css
 * 说明：朝希AI 主题配色系统
 * 职责：
 *   1. 定义 13 种完整主题配色方案（通过 data-theme 属性切换）
 *   2. 提供全局 CSS 变量（颜色、圆角、阴影、尺寸等）
 *   3. 所有 UI 组件依赖此文件的变量
 * 依赖：
 *   - 无外部依赖
 * 使用方式：
 *   // 切换主题（JS）
 *   document.documentElement.dataset.theme = '0';  // 切换到玫瑰粉
 *   document.documentElement.dataset.theme = '3';  // 切换到热情红
 *   // 获取当前主题
 *   const currentTheme = document.documentElement.dataset.theme || '0';
 * 扩展指南：
 *   新增主题时，在 :root 下添加 [data-theme="N"] 块，
 *   并同步更新 config.js 中的主题列表。
 * ============================================
 */

/* ============================================================
   一、基础公共变量（所有主题共用）
   ============================================================ */

:root {
	/* ---- 圆角 ---- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-full: 9999px;

	/* ---- 阴影 ---- */
	--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
	--shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.15);

	/**
     * 登录卡片专用阴影（暖灰调）
     * 保留原设计稿的 rgba(160, 140, 130, 0.10) 色值，
     * 避免直接套用 --shadow-md（纯黑阴影）破坏柔和视觉风格。
     * 此变量仅用于 login.css，但集中定义在主题层便于统一管理。
     */
	--shadow-card: 0 4px 24px rgba(160, 140, 130, 0.10);

	/**
     * 全局遮罩/覆盖层背景色
     * 用于模态框、弹窗等场景，压暗底层内容。
     * 采用半透明黑色，在任何主题下都能保证可读性，
     * 后续如需深色模式调整遮罩密度，仅需修改此变量。
     */
	--overlay-bg: rgba(0, 0, 0, 0.35);

	/* ---- 尺寸 ---- */
	--header-h: 56px;
	--sidebar-w: 220px;
	--panel-w: 280px;

	/* ---- 字体 ---- */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
	/* 图标字体，独立控制，跟随主题 */
	--font-family-icon: 'Phosphor', sans-serif;
	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-md: 16px;
	--font-size-lg: 18px;
	--font-size-xl: 22px;

	/* ---- 过渡动画 ---- */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
	--transition-slow: 0.4s ease;

	/* ---- 独立性别颜色变量 ---- */
	--gender-man: #5b8db8;
	--gender-woman: #d4838a;
}

/* ============================================================
   二、13 种主题配色方案
   通过 data-theme 属性切换，默认值为 '0'（玫瑰粉）
   ============================================================ */

/* ---------- 主题 0：玫瑰粉（默认） ---------- */
:root,
[data-theme='0'] {
	--primary: #d4838a;
	--primary-dark: #c4707a;
	--primary-light: #f0e6df;
	--bg-body: #f5f0eb;
	--bg-card: #fffcf9;
	--bg-sidebar: #fdfaf7;
	--bg-input: #fdfaf7;
	--bg-tab: #f5f0eb;
	--bg-msg-ai: #f3ece6;
	--bg-hover: #f5f0eb;
	--border: #eee5dd;
	--border-light: #f0e8e0;
	--border-code: #f0e0d8;
	--text: #3d3d3d;
	--text-dark: #5a4a42;
	--text-muted: #b8a8a0;
	--text-light: #d5c8c0;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #d4838a, #c4707a);
	--shadow-btn: 0 2px 8px rgba(212, 131, 138, 0.25);
}

/* ---------- 主题 1：暖阳黄 ---------- */
[data-theme='1'] {
	--primary: #ffcb7a;
	--primary-dark: #f0b85e;
	--primary-light: #fcf3e0;
	--bg-body: #f5f0eb;
	--bg-card: #fffcf7;
	--bg-sidebar: #fdfaf5;
	--bg-input: #fdfaf5;
	--bg-tab: #f5f0eb;
	--bg-msg-ai: #f5efe5;
	--bg-hover: #f5f0eb;
	--border: #eee5dd;
	--border-light: #f0e8e0;
	--border-code: #f0e8d8;
	--text: #3d3d3d;
	--text-dark: #5a4a3a;
	--text-muted: #b8a8a0;
	--text-light: #d5c8c0;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #ffcb7a, #f0b85e);
	--shadow-btn: 0 2px 8px rgba(255, 203, 122, 0.35);
}

/* ---------- 主题 2：淡紫蓝 ---------- */
[data-theme='2'] {
	--primary: #d3ceea;
	--primary-dark: #bfbade;
	--primary-light: #eceaf5;
	--bg-body: #e8f4f8;
	--bg-card: #f5faff;
	--bg-sidebar: #f0f8fc;
	--bg-input: #f0f8fc;
	--bg-tab: #e8f4f8;
	--bg-msg-ai: #eaf0f5;
	--bg-hover: #e8f4f8;
	--border: #d5e0e8;
	--border-light: #dce8f0;
	--border-code: #d5dce8;
	--text: #3d3d4a;
	--text-dark: #4a4a5a;
	--text-muted: #aab8c0;
	--text-light: #c8d0d8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #d3ceea, #bfbade);
	--shadow-btn: 0 2px 8px rgba(211, 206, 234, 0.30);
}

/* ---------- 主题 3：热情红 ---------- */
[data-theme='3'] {
	--primary: #ff2742;
	--primary-dark: #e01a32;
	--primary-light: #ffe8e4;
	--bg-body: #fff6f0;
	--bg-card: #fffcfb;
	--bg-sidebar: #fef8f5;
	--bg-input: #fef8f5;
	--bg-tab: #fff6f0;
	--bg-msg-ai: #fdf0ec;
	--bg-hover: #fff6f0;
	--border: #f0e0d8;
	--border-light: #f5e8e0;
	--border-code: #f0dcd4;
	--text: #3d3d3d;
	--text-dark: #5a3a3a;
	--text-muted: #b8a8a0;
	--text-light: #d5c8c0;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #ff2742, #e01a32);
	--shadow-btn: 0 2px 8px rgba(255, 39, 66, 0.30);
}

/* ---------- 主题 4：活力橙 ---------- */
[data-theme='4'] {
	--primary: #ff8200;
	--primary-dark: #e07000;
	--primary-light: #fff0d4;
	--bg-body: #fff5ce;
	--bg-card: #fffcf7;
	--bg-sidebar: #fefaf0;
	--bg-input: #fefaf0;
	--bg-tab: #fff5ce;
	--bg-msg-ai: #fdf3e5;
	--bg-hover: #fff5ce;
	--border: #f0e0d0;
	--border-light: #f5e8d8;
	--border-code: #f0dcc8;
	--text: #3d3d3d;
	--text-dark: #5a4a3a;
	--text-muted: #b8a8a0;
	--text-light: #d5c8c0;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #ff8200, #e07000);
	--shadow-btn: 0 2px 8px rgba(255, 130, 0, 0.30);
}

/* ---------- 主题 5：樱花粉 ---------- */
[data-theme='5'] {
	--primary: #ffa6d7;
	--primary-dark: #f08ac4;
	--primary-light: #fdeef4;
	--bg-body: #e6f0f5;
	--bg-card: #fafaff;
	--bg-sidebar: #f0f8fc;
	--bg-input: #f0f8fc;
	--bg-tab: #e6f0f5;
	--bg-msg-ai: #ecf2f5;
	--bg-hover: #e6f0f5;
	--border: #d5e0e8;
	--border-light: #dce8f0;
	--border-code: #d5dce8;
	--text: #3d3d4a;
	--text-dark: #4a3a4a;
	--text-muted: #aab8c0;
	--text-light: #c8d0d8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #ffa6d7, #f08ac4);
	--shadow-btn: 0 2px 8px rgba(255, 166, 215, 0.30);
}

/* ---------- 主题 6：清新绿 ---------- */
[data-theme='6'] {
	--primary: #4fb094;
	--primary-dark: #3d9a80;
	--primary-light: #e0f0e8;
	--bg-body: #d4ece3;
	--bg-card: #f5fff8;
	--bg-sidebar: #ecf8f0;
	--bg-input: #ecf8f0;
	--bg-tab: #d4ece3;
	--bg-msg-ai: #e0f0e8;
	--bg-hover: #d4ece3;
	--border: #c8e0d8;
	--border-light: #d4e8e0;
	--border-code: #c8dcd4;
	--text: #3d3d3d;
	--text-dark: #3a4a42;
	--text-muted: #a8b8b0;
	--text-light: #c8d8d0;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #4fb094, #3d9a80);
	--shadow-btn: 0 2px 8px rgba(79, 176, 148, 0.30);
}

/* ---------- 主题 7：森林绿 ---------- */
[data-theme='7'] {
	--primary: #508701;
	--primary-dark: #3e6e00;
	--primary-light: #e4f0d4;
	--bg-body: #d8f0c0;
	--bg-card: #f5fff0;
	--bg-sidebar: #ecf8e0;
	--bg-input: #ecf8e0;
	--bg-tab: #d8f0c0;
	--bg-msg-ai: #e4f0d4;
	--bg-hover: #d8f0c0;
	--border: #c8e0b0;
	--border-light: #d4e8c0;
	--border-code: #c8dcb0;
	--text: #3d3d3d;
	--text-dark: #3a4a32;
	--text-muted: #a8b898;
	--text-light: #c8d8b8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #508701, #3e6e00);
	--shadow-btn: 0 2px 8px rgba(80, 135, 1, 0.30);
}

/* ---------- 主题 8：杏色暖 ---------- */
[data-theme='8'] {
	--primary: #ffd8bb;
	--primary-dark: #f0c4a8;
	--primary-light: #fdf0e4;
	--bg-body: #fdf0e8;
	--bg-card: #fffcf9;
	--bg-sidebar: #fef8f2;
	--bg-input: #fef8f2;
	--bg-tab: #fdf0e8;
	--bg-msg-ai: #fcf0e5;
	--bg-hover: #fdf0e8;
	--border: #f0e0d0;
	--border-light: #f5e8d8;
	--border-code: #f0dcc8;
	--text: #3d3d3d;
	--text-dark: #5a4a3a;
	--text-muted: #b8a8a0;
	--text-light: #d5c8c0;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #ffd8bb, #f0c4a8);
	--shadow-btn: 0 2px 8px rgba(255, 216, 187, 0.30);
}

/* ---------- 主题 9：翡翠绿 ---------- */
[data-theme='9'] {
	--primary: #1c8769;
	--primary-dark: #147055;
	--primary-light: #e0f0e8;
	--bg-body: #f9e8fa;
	--bg-card: #fcf5fc;
	--bg-sidebar: #f8eff8;
	--bg-input: #f8eff8;
	--bg-tab: #f9e8fa;
	--bg-msg-ai: #f5ecf5;
	--bg-hover: #f9e8fa;
	--border: #e0d8e0;
	--border-light: #e8e0e8;
	--border-code: #dcd0dc;
	--text: #3d3d3d;
	--text-dark: #4a3a4a;
	--text-muted: #b8a8b8;
	--text-light: #d5c8d5;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #1c8769, #147055);
	--shadow-btn: 0 2px 8px rgba(28, 135, 105, 0.30);
}

/* ---------- 主题 10：嫩芽绿 ---------- */
[data-theme='10'] {
	--primary: #8ed63b;
	--primary-dark: #78c02a;
	--primary-light: #f0f8e0;
	--bg-body: #fee089;
	--bg-card: #fffcf0;
	--bg-sidebar: #fef8e0;
	--bg-input: #fef8e0;
	--bg-tab: #fee089;
	--bg-msg-ai: #fcf0d4;
	--bg-hover: #fee089;
	--border: #f0dcc0;
	--border-light: #f5e8d0;
	--border-code: #f0d8b8;
	--text: #3d3d3d;
	--text-dark: #5a4a3a;
	--text-muted: #b8a898;
	--text-light: #d5c8b8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #8ed63b, #78c02a);
	--shadow-btn: 0 2px 8px rgba(142, 214, 59, 0.30);
}

/* ---------- 主题 11：梦幻紫 ---------- */
[data-theme='11'] {
	--primary: #cb89ff;
	--primary-dark: #b870e8;
	--primary-light: #f0e8f8;
	--bg-body: #e8e0f5;
	--bg-card: #f8f5fc;
	--bg-sidebar: #f0ecf8;
	--bg-input: #f0ecf8;
	--bg-tab: #e8e0f5;
	--bg-msg-ai: #ece8f5;
	--bg-hover: #e8e0f5;
	--border: #d8d0e8;
	--border-light: #e0d8ec;
	--border-code: #d8cce4;
	--text: #3d3d4a;
	--text-dark: #4a3a5a;
	--text-muted: #b0a8c0;
	--text-light: #d0c8d8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #cb89ff, #b870e8);
	--shadow-btn: 0 2px 8px rgba(203, 137, 255, 0.30);
}

/* ---------- 主题 12：玫瑰红 ---------- */
[data-theme='12'] {
	--primary: #ff517e;
	--primary-dark: #e03a64;
	--primary-light: #fde8ec;
	--bg-body: #abb9ff;
	--bg-card: #f5f5ff;
	--bg-sidebar: #ececfc;
	--bg-input: #ececfc;
	--bg-tab: #abb9ff;
	--bg-msg-ai: #e4e8fc;
	--bg-hover: #abb9ff;
	--border: #c8cce8;
	--border-light: #d4d8ec;
	--border-code: #c8c8e4;
	--text: #3d3d4a;
	--text-dark: #4a3a4a;
	--text-muted: #a8a8c0;
	--text-light: #c8c8d8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #ff517e, #e03a64);
	--shadow-btn: 0 2px 8px rgba(255, 81, 126, 0.30);
}

/* ---------- 主题 13：星空蓝 ---------- */
[data-theme='13'] {
	--primary: #3d5afe;
	--primary-dark: #2a44e0;
	--primary-light: #e4e8fc;
	--bg-body: #e8eaf6;
	--bg-card: #f5f5ff;
	--bg-sidebar: #eef0f8;
	--bg-input: #eef0f8;
	--bg-tab: #e8eaf6;
	--bg-msg-ai: #e8ecf5;
	--bg-hover: #e8eaf6;
	--border: #d0d8e8;
	--border-light: #dce0ec;
	--border-code: #d0d4e4;
	--text: #3d3d4a;
	--text-dark: #3a3a5a;
	--text-muted: #a8b0c0;
	--text-light: #c8d0d8;
	--text-white: #ffffff;
	--danger: #d48383;
	--danger-rgb: 212, 131, 131;
	--success: #a8c4a0;
	--success-rgb: 168, 196, 160;
	--warning: #f5a623;
	--warning-rgb: 245, 166, 35;
	--gradient-btn: linear-gradient(135deg, #3d5afe, #2a44e0);
	--shadow-btn: 0 2px 8px rgba(61, 90, 254, 0.30);
}

/* ============================================================
   三、通用工具类（基于主题变量）
   ============================================================ */

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

/* 主色背景 */
.bg-primary {
	background-color: var(--primary);
}

/* 主色边框 */
.border-primary {
	border-color: var(--primary);
}

/* 卡片通用样式（可直接复用） */
.card {
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 20px;
}

/* 输入框通用样式 */
.input-field {
	background-color: var(--bg-input);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	color: var(--text);
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	padding: 10px 14px;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input-field:focus {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px var(--primary-light);
	outline: none;
}

.input-field::placeholder {
	color: var(--text-light);
}

/* 按钮基础样式（具体变体由 components.css 提供） */
.btn {
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	padding: 10px 16px;
	transition: all var(--transition-fast);
}

.btn:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

/* 滚动条美化（基于当前主题） */
::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	background: var(--bg-body);
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}