/* ===== 1. 默认主题 - 金爵 (Golden) =====
   经典商务风，暖金色调
   ============================================================ */
:root,
.theme-default {
    --primary: #f0a500;
    --primary-dark: #d49400;
    --primary-light: rgba(240, 165, 0, 0.1);
    --primary-rgb: 240, 165, 0;

    --dark: #1a1a2e;
    --dark-light: rgba(26, 26, 46, 0.6);
    --dark-10: rgba(26, 26, 46, 0.1);

    --text: #333;
    --text-secondary: #555;
    --text-light: #666;
    --text-muted: #888;
    --text-gray: #999;

    --bg-body: #fff;
    --bg-light: #f9f9f9;
    --bg-white: #fff;
    --bg-dark-section: #1a1a2e;
    --bg-hover: #f5f5f5;
    --bg-card: #fff;
    --white: var(--bg-white);

    --border: #e0e0e0;
    --border-light: #eee;
    --border-lighter: #f5f5f5;

    --shadow-sm: 0 5px 20px rgba(0,0,0,0.06);
    --shadow-md: 0 10px 40px rgba(0,0,0,0.1);
    --shadow-hover: 0 15px 40px rgba(0,0,0,0.1);

    --overlay: rgba(0, 0, 0, 0.55);
    --gradient-banner: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0.2));

    --topbar-bg: #1a1a2e;
    --topbar-text: rgba(255,255,255,0.6);
    --navbar-bg: #fff;
    --navbar-text: #333;
    --navbar-shadow: 0 2px 12px rgba(0,0,0,0.06);

    --footer-bg: #1a1a2e;
    --footer-text: rgba(255,255,255,0.7);
    --footer-link: rgba(255,255,255,0.5);
    --footer-link-hover: #f0a500;
    --footer-border: rgba(255,255,255,0.06);
    --footer-bottom-text: rgba(255,255,255,0.35);

    --feature-hover-bg: rgba(240, 165, 0, 0.1);
    --feature-hover-border: #f0a500;
    --float-shadow: rgba(240, 165, 0, 0.35);
    --float-shadow-hover: rgba(240, 165, 0, 0.45);

    --stat-number: #e63946;
    --tag-hot: #e74c3c;
    --tag-new: #5fb878;
    --transition: 0.3s;
}

/* ===== 2. 天蓝 (Sky Blue) =====
   清爽天蓝 + 白，干净通透
   导航: 深蓝不渐变  主色: 亮蓝  背景: 清透淡蓝
   ============================================================ */
.theme-blue {
    --primary: #2196f3;
    --primary-dark: #1976d2;
    --primary-light: rgba(33, 150, 243, 0.12);
    --primary-rgb: 33, 150, 243;

    --dark: #0d2137;
    --dark-light: rgba(13, 33, 55, 0.6);
    --dark-10: rgba(13, 33, 55, 0.08);

    --text: #1a2a3a;
    --text-secondary: #3a5a7a;
    --text-light: #5a7a9a;
    --text-muted: #7a9aba;
    --text-gray: #9abada;

    --bg-body: #eef4fa;
    --bg-light: #e8f0f8;
    --bg-white: #f6fafe;
    --bg-dark-section: #0d2137;
    --bg-hover: #dee8f2;
    --bg-card: #f6fafe;
    --white: var(--bg-white);

    --border: #c8d8e8;
    --border-light: #dce6f0;
    --border-lighter: #eaf0f6;

    --shadow-sm: 0 2px 12px rgba(33, 150, 243, 0.06);
    --shadow-md: 0 8px 30px rgba(33, 150, 243, 0.08);
    --shadow-hover: 0 12px 40px rgba(33, 150, 243, 0.10);

    --overlay: rgba(13, 33, 55, 0.6);
    --gradient-banner: linear-gradient(to right, rgba(13,33,55,0.6), rgba(13,33,55,0.2));

    --topbar-bg: #0d2137;
    --topbar-text: rgba(255,255,255,0.6);
    --navbar-bg: #0d2137;
    --navbar-text: rgba(255,255,255,0.9);
    --navbar-shadow: 0 2px 16px rgba(0,0,0,0.12);

    --footer-bg: #0d2137;
    --footer-text: rgba(255,255,255,0.65);
    --footer-link: rgba(255,255,255,0.45);
    --footer-link-hover: #64b5f6;
    --footer-border: rgba(255,255,255,0.06);
    --footer-bottom-text: rgba(255,255,255,0.3);

    --feature-hover-bg: rgba(33, 150, 243, 0.06);
    --feature-hover-border: #2196f3;
    --float-shadow: rgba(33, 150, 243, 0.3);
    --float-shadow-hover: rgba(33, 150, 243, 0.4);

    --stat-number: #e63946;
    --tag-hot: #e74c3c;
    --tag-new: #2196f3;
}

/* ===== 3. 松石绿 (Pine Green) =====
   60-30-10 法则:
   60% 极浅薄荷白        — 基底
   30% 松石绿            — 主视觉（导航、按钮、标题装饰）
   10% 暖橙              — 强调（图标、分割线、悬浮）
   适合: 自然、有机、环保、健康品牌
   配色: 松绿 + 米白 + 暖橙，温暖有活力
   ============================================================ */
.theme-green {
    /* 30% 主色：松石绿 */
    --primary: #2e7d32;
    --primary-dark: #1b5e20;
    --primary-light: rgba(46, 125, 50, 0.12);
    --primary-rgb: 46, 125, 50;

    --dark: #1b3a1e;
    --dark-light: rgba(27, 58, 30, 0.55);
    --dark-10: rgba(27, 58, 30, 0.08);

    /* 60% 基底：深墨绿灰文字 + 极浅薄荷白背景 */
    --text: #2c3e2f;
    --text-secondary: #4a5e4d;
    --text-light: #6a7e6d;
    --text-muted: #8a9e8d;
    --text-gray: #aabaaa;

    --bg-body: #f2f7f0;
    --bg-light: #eef4ea;
    --bg-white: #f6faf4;
    --bg-dark-section: #1b3a1e;
    --bg-hover: #e4ece0;
    --bg-card: #f8fbf6;
    --white: var(--bg-white);

    /* 边框带绿调 */
    --border: #c8d8c0;
    --border-light: #d8e4d0;
    --border-lighter: #e8f0e4;

    --shadow-sm: 0 2px 12px rgba(46, 125, 50, 0.06);
    --shadow-md: 0 8px 30px rgba(46, 125, 50, 0.08);
    --shadow-hover: 0 12px 40px rgba(46, 125, 50, 0.10);

    --overlay: rgba(27, 58, 30, 0.55);
    --gradient-banner: linear-gradient(to right, rgba(27,58,30,0.55), rgba(27,58,30,0.1));

    /* 30% 松石绿：导航/页脚 */
    --topbar-bg: #1b3a1e;
    --topbar-text: rgba(255,255,255,0.55);
    --navbar-bg: #2e7d32;
    --navbar-text: rgba(255,255,255,0.92);
    --navbar-shadow: 0 2px 16px rgba(46,125,50,0.15);

    --footer-bg: #1b3a1e;
    --footer-text: rgba(255,255,255,0.6);
    --footer-link: rgba(255,255,255,0.4);
    --footer-link-hover: #ff8f00;
    --footer-border: rgba(255,255,255,0.06);
    --footer-bottom-text: rgba(255,255,255,0.25);

    /* 10% 暖橙：强调和悬浮 */
    --feature-hover-bg: rgba(255, 143, 0, 0.08);
    --feature-hover-border: #ff8f00;
    --float-shadow: rgba(46, 125, 50, 0.3);
    --float-shadow-hover: rgba(255, 143, 0, 0.3);

    --stat-number: #e63946;
    --tag-hot: #ff8f00;
    --tag-new: #66bb6a;
}

/* ===== 4. 勃艮第 (Burgundy) =====
   60-30-10 法则:
   60% 中性色（暖灰/浅灰）— 基底
   30% 勃艮第酒红        — 主视觉（导航、区块、标题装饰）
   10% 香槟金            — 强调（悬停、边框、图标）
   注意: 避免纯白+纯红搭配，用暖灰替代纯白
   ============================================================ */
.theme-red {
    --primary: #8a3a3a;
    --primary-dark: #722f37;
    --primary-light: rgba(138, 58, 58, 0.12);
    --primary-rgb: 138, 58, 58;

    --dark: #2a1818;
    --dark-light: rgba(42, 24, 24, 0.55);
    --dark-10: rgba(42, 24, 24, 0.08);

    --text: #3a3a3a;
    --text-secondary: #5a5252;
    --text-light: #7a7272;
    --text-muted: #9a9292;
    --text-gray: #b0aaa8;

    /* 60% 中性基底：用暖灰替代纯白，避免红+白刺眼 */
    --bg-body: #f2f2f0;
    --bg-light: #f5f3f0;
    --bg-white: #f9f8f6;
    --bg-dark-section: #2a1818;
    --bg-hover: #e8e4e0;
    --bg-card: #faf9f7;
    --white: var(--bg-white);

    /* 30% 酒红主色：用于边框、分隔线 */
    --border: #d8d0c8;
    --border-light: #e6e0d8;
    --border-lighter: #efebe6;

    --shadow-sm: 0 2px 12px rgba(114, 47, 55, 0.06);
    --shadow-md: 0 8px 30px rgba(114, 47, 55, 0.08);
    --shadow-hover: 0 12px 40px rgba(114, 47, 55, 0.10);

    --overlay: rgba(42, 24, 24, 0.6);
    /* 30% 酒红主色：Banner遮罩带酒红渐变，降低刺眼感 */
    --gradient-banner: linear-gradient(to right, rgba(42,24,24,0.55), rgba(42,24,24,0.1));

    /* 30% 酒红主色：导航/页脚 */
    --topbar-bg: #2a1818;
    --topbar-text: rgba(255,255,255,0.5);
    --navbar-bg: linear-gradient(135deg, #5a2828, #722f37);
    --navbar-text: rgba(255,255,255,0.92);
    --navbar-shadow: 0 2px 16px rgba(90,40,40,0.2);

    --footer-bg: linear-gradient(135deg, #1a0e0e, #2a1818);
    --footer-text: rgba(255,255,255,0.55);
    --footer-link: rgba(255,255,255,0.38);
    --footer-link-hover: #c9a96e;
    --footer-border: rgba(255,255,255,0.05);
    --footer-bottom-text: rgba(255,255,255,0.2);

    /* 10% 香槟金：悬停和高亮 */
    --feature-hover-bg: rgba(201, 169, 110, 0.08);
    --feature-hover-border: #c9a96e;
    --float-shadow: rgba(201, 169, 110, 0.3);
    --float-shadow-hover: rgba(201, 169, 110, 0.4);

    --stat-number: #e63946;
    --tag-hot: #8a3a3a;
    --tag-new: #722f37;
}

/* ===== 5. 多乐 (Multicolor) =====
   多色混搭，各司其职 — 每个颜色都有自己的使命
   60-30-10 法则:
   60% 极浅灰白 + 深空蓝灰  — 基底与骨架
   30% 多色体系             — 各色担当不同角色
   10% 留白呼吸感           — 干净利落
   --------------------------------------------------
   深空蓝灰 #2A3B4C — 导航/页脚/大标题，冷静沉稳
   珊瑚柔红 #E86A6A — 按钮/促销/价格，制造点击欲望
   鼠尾草绿 #4A9E7A — 成功/成长/健康模块点缀
   琥珀金  #E8B84B — 热卖标签/星级/警告提示
   香芋紫  #7C6FAA — VIP标识/创意装饰线条
   适合: 综合门户、SaaS平台、创意工作室
   ============================================================ */
.theme-colorful {
    /* 珊瑚柔红 — 主按钮CTA */
    --primary: #e86a6a;
    --primary-dark: #d05050;
    --primary-light: rgba(232, 106, 106, 0.12);
    --primary-rgb: 232, 106, 106;

    /* 深空蓝灰 — 大标题/骨架色 */
    --dark: #2a3b4c;
    --dark-light: rgba(42, 59, 76, 0.55);
    --dark-10: rgba(42, 59, 76, 0.08);

    /* 60% 基底：深空文字 + 极浅灰白背景 */
    --text: #2a3b4c;
    --text-secondary: #4a5b6c;
    --text-light: #6a7b8c;
    --text-muted: #8a9bac;
    --text-gray: #aabbcc;

    --bg-body: #f5f7fa;
    --bg-light: #eef0f4;
    --bg-white: #fafbfc;
    --bg-dark-section: #1e2630;
    --bg-hover: #e4e7ec;
    --bg-card: #fafbfc;
    --white: var(--bg-white);

    --border: #d0d6de;
    --border-light: #e0e4ea;
    --border-lighter: #eceef2;

    --shadow-sm: 0 2px 12px rgba(42, 59, 76, 0.06);
    --shadow-md: 0 8px 30px rgba(42, 59, 76, 0.08);
    --shadow-hover: 0 12px 40px rgba(42, 59, 76, 0.10);

    --overlay: rgba(30, 38, 48, 0.6);
    --gradient-banner: linear-gradient(to right, rgba(30,38,48,0.55), rgba(30,38,48,0.1));

    /* 深空蓝灰 — 导航/页脚 */
    --topbar-bg: #1e2630;
    --topbar-text: rgba(255,255,255,0.5);
    --navbar-bg: #2a3b4c;
    --navbar-text: rgba(255,255,255,0.92);
    --navbar-shadow: 0 2px 16px rgba(42,59,76,0.15);

    --footer-bg: #1e2630;
    --footer-text: rgba(255,255,255,0.55);
    --footer-link: rgba(255,255,255,0.38);
    --footer-link-hover: #e8b84b;
    --footer-border: rgba(255,255,255,0.05);
    --footer-bottom-text: rgba(255,255,255,0.2);

    /* 香芋紫 — 创意悬浮装饰 */
    --feature-hover-bg: rgba(124, 111, 170, 0.08);
    --feature-hover-border: #7c6faa;

    /* 鼠尾草绿 — 浮动按钮默认光晕 */
    --float-shadow: rgba(74, 158, 122, 0.3);
    --float-shadow-hover: rgba(74, 158, 122, 0.4);

    /* 琥珀金 — 热卖标签 / 鼠尾草绿 — 新品标签 */
    --stat-number: #e63946;
    --tag-hot: #e8b84b;
    --tag-new: #4a9e7a;
}