/* 会员端模板主题（经典/简约/深色 + 清新/玫瑰/暗夜/极简/商务/国潮 等 15 套）
 * ---------------------------------------------------------------------------
 * 说明：会员端标准模板主题，随版本迭代陆续补齐新增主题。

 *
 * 用法：
 *   - <html class="tpl-xxx"> 上挂主题类（由后端 layoutStyle 决定）
 *   - 选择器统一用 html.tpl-xxx（0,1,1）而非 .tpl-xxx（0,1,0）：
 *     主样式 index-*.css 里有 :root{--bg/--text/--gold...}，同为 0,1,0 但加载在后，
 *     会把主题的背景/文字/金色变量覆盖掉（表现为「只有主色变了」）。
 *   - 主题变量同时写进 --gold 系列，使既有 var(--gold) 的页面也跟着换肤
 */
:root {
  --tpl-ready: 1;
}

html.tpl-default, body.tpl-default {
  --brand: #c8911f; --brand-2: #ce9c35; --brand-deep: #b0801b;
  --brand-grad: linear-gradient(135deg, #d2a547 0%, #c8911f 100%);
  --brand-grad-soft: linear-gradient(135deg, #fbeecb 0%, #c8911f 100%);
  --brand-soft: #fbeecb; --brand-line: #f0dcae;
  --bg: #fff8ec; --card: #ffffff; --fill: #fff8ec;
  --line: #f0dcae; --line-soft: #fbeecb;
  --text: #3a2f17; --text-2: #8a7240; --text-3: #8a7240;
  --shadow-float: 0 6px 20px rgba(200, 145, 31, 0.12);
}

html.tpl-jukebao, body.tpl-jukebao {
  --brand: #1d6fff; --brand-2: #347dff; --brand-deep: #1a62e0;
  --brand-grad: linear-gradient(135deg, #4689ff 0%, #1d6fff 100%);
  --brand-grad-soft: linear-gradient(135deg, #e6f0ff 0%, #1d6fff 100%);
  --brand-soft: #e6f0ff; --brand-line: #cfe0ff;
  --bg: #eef4ff; --card: #ffffff; --fill: #eef4ff;
  --line: #cfe0ff; --line-soft: #e6f0ff;
  --text: #1b2a4a; --text-2: #5a6b8a; --text-3: #5a6b8a;
  --shadow-float: 0 6px 20px rgba(29, 111, 255, 0.12);
}

html.tpl-city_partner, body.tpl-city_partner {
  --brand: #7c3aed; --brand-2: #894eef; --brand-deep: #6d33d1;
  --brand-grad: linear-gradient(135deg, #945df0 0%, #7c3aed 100%);
  --brand-grad-soft: linear-gradient(135deg, #efe6ff 0%, #7c3aed 100%);
  --brand-soft: #efe6ff; --brand-line: #d8c6f5;
  --bg: #f6f1ff; --card: #ffffff; --fill: #f6f1ff;
  --line: #d8c6f5; --line-soft: #efe6ff;
  --text: #2e1a4d; --text-2: #6b4f9a; --text-3: #6b4f9a;
  --shadow-float: 0 6px 20px rgba(124, 58, 237, 0.12);
}

html.tpl-minimal, body.tpl-minimal {
  --brand: #2bb673; --brand-2: #40bd81; --brand-deep: #26a065;
  --brand-grad: linear-gradient(135deg, #51c38c 0%, #2bb673 100%);
  --brand-grad-soft: linear-gradient(135deg, #e3f5ec 0%, #2bb673 100%);
  --brand-soft: #e3f5ec; --brand-line: #c9ead9;
  --bg: #f3faf7; --card: #ffffff; --fill: #f3faf7;
  --line: #c9ead9; --line-soft: #e3f5ec;
  --text: #16352a; --text-2: #5a7a6b; --text-3: #5a7a6b;
  --shadow-float: 0 6px 20px rgba(43, 182, 115, 0.12);
}

html.tpl-revenue, body.tpl-revenue {
  --brand: #1677ff; --brand-2: #4096ff; --brand-deep: #0f5fd8;
  --brand-grad: linear-gradient(135deg, #4d9bff 0%, #1677ff 100%);
  --brand-grad-soft: linear-gradient(135deg, #e6f0ff 0%, #1677ff 100%);
  --brand-soft: #e6f0ff; --brand-line: #cfe0ff;
  --bg: #f5f8ff; --card: #ffffff; --fill: #f5f8ff;
  --line: #cfe0ff; --line-soft: #e6f0ff;
  --text: #1b2a4a; --text-2: #5a6b8a; --text-3: #5a6b8a;
  --shadow-float: 0 6px 20px rgba(22, 119, 255, 0.12);
}

html.tpl-ecom_rank, body.tpl-ecom_rank {
  --brand: #f5222d; --brand-2: #ff4d4f; --brand-deep: #cf1322;
  --brand-grad: linear-gradient(135deg, #ff7875 0%, #f5222d 100%);
  --brand-grad-soft: linear-gradient(135deg, #ffe6e6 0%, #f5222d 100%);
  --brand-soft: #ffe6e6; --brand-line: #ffccc7;
  --bg: #fff5f5; --card: #ffffff; --fill: #fff5f5;
  --line: #ffccc7; --line-soft: #ffe6e6;
  --text: #4a1d1d; --text-2: #a05a5a; --text-3: #a05a5a;
  --shadow-float: 0 6px 20px rgba(245, 34, 45, 0.12);
}

html.tpl-dark, body.tpl-dark {
  --brand: #4a9eff; --brand-2: #6bb0ff; --brand-deep: #2f7fd6;
  --brand-grad: linear-gradient(135deg, #6bb0ff 0%, #4a9eff 100%);
  --brand-grad-soft: linear-gradient(135deg, #14304d 0%, #4a9eff 100%);
  --brand-soft: #14304d; --brand-line: #23415f;
  --bg: #0f1622; --card: #17202e; --fill: #1b2534;
  --line: #23415f; --line-soft: #1b2534;
  --text: #e8ecf3; --text-2: #9aa8bd; --text-3: #9aa8bd;
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.4);
}

html.tpl-activity, body.tpl-activity {
  --brand: #ff7a45; --brand-2: #ff9c6e; --brand-deep: #e05a25;
  --brand-grad: linear-gradient(135deg, #ffa26f 0%, #ff7a45 100%);
  --brand-grad-soft: linear-gradient(135deg, #fff1e8 0%, #ff7a45 100%);
  --brand-soft: #fff1e8; --brand-line: #ffd8bf;
  --bg: #fff8f4; --card: #ffffff; --fill: #fff8f4;
  --line: #ffd8bf; --line-soft: #fff1e8;
  --text: #4a2a18; --text-2: #a07050; --text-3: #a07050;
  --shadow-float: 0 6px 20px rgba(255, 122, 69, 0.12);
}

html.tpl-grid_dense, body.tpl-grid_dense {
  --brand: #13c2c2; --brand-2: #33d4d4; --brand-deep: #0e9e9e;
  --brand-grad: linear-gradient(135deg, #4fd8d8 0%, #13c2c2 100%);
  --brand-grad-soft: linear-gradient(135deg, #e0f7f7 0%, #13c2c2 100%);
  --brand-soft: #e0f7f7; --brand-line: #b7ebeb;
  --bg: #f0fbfb; --card: #ffffff; --fill: #f0fbfb;
  --line: #b7ebeb; --line-soft: #e0f7f7;
  --text: #124b4b; --text-2: #4f8080; --text-3: #4f8080;
  --shadow-float: 0 6px 20px rgba(19, 194, 194, 0.12);
}

/* ---------- 补齐 6 套（清新绿/玫瑰粉/暗夜紫/极简黑白/商务灰蓝/国潮红金）----------
   背景：这 6 个模板在 member_templates 里存在，但 layoutStyle 既不在前端白名单、
   CSS 里也没有对应类，选中后会静默回落成「经典红」的布局。此处补齐主题变量。 */
html.tpl-fresh, body.tpl-fresh {
  --brand: #2e9e5b; --brand-2: #43ae6c; --brand-deep: #25884d;
  --brand-grad: linear-gradient(135deg, #55b87d 0%, #2e9e5b 100%);
  --brand-grad-soft: linear-gradient(135deg, #e6f5ec 0%, #2e9e5b 100%);
  --brand-soft: #e6f5ec; --brand-line: #c6e9d5;
  --bg: #f2faf6; --card: #ffffff; --fill: #f2faf6;
  --line: #c6e9d5; --line-soft: #e6f5ec;
  --text: #16352a; --text-2: #5a7a6b; --text-3: #5a7a6b;
  --shadow-float: 0 6px 20px rgba(46, 158, 91, 0.12);
}

html.tpl-rose, body.tpl-rose {
  --brand: #d14d72; --brand-2: #dc6b8a; --brand-deep: #b63f61;
  --brand-grad: linear-gradient(135deg, #e4839e 0%, #d14d72 100%);
  --brand-grad-soft: linear-gradient(135deg, #fce8ee 0%, #d14d72 100%);
  --brand-soft: #fce8ee; --brand-line: #f5cdd9;
  --bg: #fff6f8; --card: #ffffff; --fill: #fff6f8;
  --line: #f5cdd9; --line-soft: #fce8ee;
  --text: #4a1f2c; --text-2: #a05a70; --text-3: #a05a70;
  --shadow-float: 0 6px 20px rgba(209, 77, 114, 0.12);
}

/* 暗夜紫：深色底（同 tpl-dark 的处理方式） */
html.tpl-night, body.tpl-night {
  --brand: #6b4fbb; --brand-2: #8b6fd1; --brand-deep: #5a3fa0;
  --brand-grad: linear-gradient(135deg, #8b6fd1 0%, #6b4fbb 100%);
  --brand-grad-soft: linear-gradient(135deg, #241a3d 0%, #6b4fbb 100%);
  --brand-soft: #241a3d; --brand-line: #3a2c5c;
  --bg: #131020; --card: #1c1730; --fill: #201a36;
  --line: #3a2c5c; --line-soft: #201a36;
  --text: #ece8f7; --text-2: #a99cc4; --text-3: #a99cc4;
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* 极简黑白：中性灰阶，弱化色彩 */
html.tpl-mono, body.tpl-mono {
  --brand: #1f1f1f; --brand-2: #3d3d3d; --brand-deep: #0d0d0d;
  --brand-grad: linear-gradient(135deg, #4a4a4a 0%, #1f1f1f 100%);
  --brand-grad-soft: linear-gradient(135deg, #f2f2f2 0%, #1f1f1f 100%);
  --brand-soft: #f2f2f2; --brand-line: #d9d9d9;
  --bg: #fafafa; --card: #ffffff; --fill: #f2f2f2;
  --line: #d9d9d9; --line-soft: #f2f2f2;
  --text: #1f1f1f; --text-2: #6b6b6b; --text-3: #6b6b6b;
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.1);
}

html.tpl-business, body.tpl-business {
  --brand: #3c4a5a; --brand-2: #55677a; --brand-deep: #2e3947;
  --brand-grad: linear-gradient(135deg, #66798d 0%, #3c4a5a 100%);
  --brand-grad-soft: linear-gradient(135deg, #e9edf2 0%, #3c4a5a 100%);
  --brand-soft: #e9edf2; --brand-line: #cdd6df;
  --bg: #f5f7fa; --card: #ffffff; --fill: #f5f7fa;
  --line: #cdd6df; --line-soft: #e9edf2;
  --text: #22303d; --text-2: #657587; --text-3: #657587;
  --shadow-float: 0 6px 20px rgba(60, 74, 90, 0.12);
}

/* 国潮红金：红为主、金为辅（描边/浅底走金色） */
html.tpl-guochao, body.tpl-guochao {
  --brand: #c1272d; --brand-2: #d93b41; --brand-deep: #a01f25;
  --brand-grad: linear-gradient(135deg, #e4585e 0%, #c1272d 100%);
  --brand-grad-soft: linear-gradient(135deg, #fbe9d9 0%, #c1272d 100%);
  --brand-soft: #fbe9d9; --brand-line: #f0cdb8;
  --bg: #fffaf5; --card: #ffffff; --fill: #fffaf5;
  --line: #f0cdb8; --line-soft: #fbe9d9;
  --text: #4a1d1d; --text-2: #a07050; --text-3: #a07050;
  --shadow-float: 0 6px 20px rgba(193, 39, 45, 0.12);
}

/* ---------- 把主题变量接到 --gold 系列 ----------
   页面大量使用 var(--gold) / var(--gold-grad) 等，
   这里让它们跟随主题的 --brand，一套主题同时驱动两套变量名。 */
html.tpl-default, html.tpl-jukebao, html.tpl-city_partner, html.tpl-minimal, html.tpl-revenue,
html.tpl-ecom_rank, html.tpl-dark, html.tpl-activity, html.tpl-grid_dense,
html.tpl-fresh, html.tpl-rose, html.tpl-night, html.tpl-mono, html.tpl-business, html.tpl-guochao {
  --gold: var(--brand);
  --gold-light: var(--brand-soft);
  --gold-dark: var(--brand-deep);
  --gold-deep: var(--brand-deep);
  --gold-grad: var(--brand-grad);
  --gold-grad-soft: var(--brand-grad-soft);
}

/* 主题变量 → 应用令牌（2026-10-30 补）
 * ---------------------------------------------------------------------------
 * 会员端页面读的是 --text-primary / --bg-card / --border 这套令牌，
 * 而主题只提供 --text / --card / --line。不映射时，深色主题只有主色变，
 * 卡片和文字仍是白底黑字（暗夜/深色/极简黑白会直接糊成一片）。
 * 放在文件末尾并按 html[class*=tpl-] 提升一级特异性，覆盖主样式 :root 的同名默认值。
 */
html[class*="tpl-"] {
  --bg-white: var(--card);
  --bg-card: var(--card);
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-tertiary: var(--text-3);
  --border: var(--line);
}