/* ==========================================================================
   米粒互联网官网 —— 主题皮肤包（Web 端 + 手机端同步）
   --------------------------------------------------------------------------
   工作原理：所有主题只覆盖 CSS 变量，不改动任何布局，因此手机版自动同步，
            无需单独写移动端样式。

   ★ 新增一套主题的方法（三步，不用碰其它文件）：
     1. 复制下面任意一段 html[data-theme="xxx"]，改掉 xxx 和颜色值；
     2. 在 api/theme.php 的 $themes 数组里加一行 'xxx' => array('名称', '场景说明', '#主色,#辅色')；
     3. 后台「主题皮肤」页会自动出现该主题的色卡，点一下即可启用。

   变量清单（缺一会导致该处不变色）：
     品牌：--brand / --brand-rgb / --brand-2 / --brand-hover / --brand-mid
           / --brand-deep / --brand-dark / --brand-light
     点缀：--gold / --gold-light / --gold-deep
     中性：--ink / --ink-2 / --muted / --muted-2 / --line / --line-2
           / --bg / --bg-soft / --bg-deep
     状态：--success / --success-text / --success-sub
           / --danger / --danger-bg / --danger-text / --danger-sub
     辅助：--accent-a / --accent-a-deep / --accent-b / --accent-b-deep / --accent-c
     阴影：--shadow-rgb
   ========================================================================== */

/* ===================== 1. 品牌蓝 · 默认（深蓝主色 + 米金点缀） ===================== */
html[data-theme="default"] {
  --brand: #1152d4;
  --brand-rgb: 17, 82, 212;
  --brand-2: #3f8bff;
  --brand-hover: #0d46b8;
  --brand-mid: #123f8f;
  --brand-deep: #0a2f7a;
  --brand-dark: #08224f;
  --brand-light: #eaf1ff;

  --gold: #f0a020;
  --gold-light: #fff6e6;
  --gold-deep: #b9740b;

  --ink: #0f1c2e;
  --ink-2: #33445c;
  --muted: #6b7c93;
  --muted-2: #97a5b8;
  --line: #e7ecf3;
  --line-2: #f0f3f8;
  --bg: #ffffff;
  --bg-soft: #f6f8fc;
  --bg-deep: #0a1c33;

  --success: #12a673;
  --success-text: #12805a;
  --success-sub: #2f7f66;
  --danger: #e0463c;
  --danger-bg: #fdeceb;
  --danger-text: #b8322a;
  --danger-sub: #a4453d;

  --accent-a: #2b8aef;
  --accent-a-deep: #12406e;
  --accent-b: #18a888;
  --accent-b-deep: #0d5f56;
  --accent-c: #c96a12;

  --shadow-rgb: 15, 28, 46;
}

/* ===================== 2. 中国红 · 国庆（10.01 - 10.07） ===================== */
html[data-theme="national"] {
  --brand: #c8161d;
  --brand-rgb: 200, 22, 29;
  --brand-2: #e8384f;
  --brand-hover: #a51016;
  --brand-mid: #8f0f14;
  --brand-deep: #7d0c11;
  --brand-dark: #5c080d;
  --brand-light: #fdecee;

  --gold: #f5c518;
  --gold-light: #fff8e1;
  --gold-deep: #b98c00;

  --ink: #241014;
  --ink-2: #4a2226;
  --muted: #8b6165;
  --muted-2: #b39295;
  --line: #f2e0e2;
  --line-2: #f9f0f1;
  --bg: #ffffff;
  --bg-soft: #fdf6f7;
  --bg-deep: #2a0d10;

  --success: #12a673;
  --success-text: #12805a;
  --success-sub: #2f7f66;
  --danger: #d4380d;
  --danger-bg: #fdeceb;
  --danger-text: #a8200b;
  --danger-sub: #93371f;

  --accent-a: #e8483f;
  --accent-a-deep: #8f1f19;
  --accent-b: #d4a017;
  --accent-b-deep: #7d5f0b;
  --accent-c: #c96a12;

  --shadow-rgb: 46, 16, 18;
}

/* ===================== 3. 新春红金 · 春节 ===================== */
html[data-theme="spring"] {
  --brand: #d42b1f;
  --brand-rgb: 212, 43, 31;
  --brand-2: #f2563c;
  --brand-hover: #b01f16;
  --brand-mid: #971812;
  --brand-deep: #7d120e;
  --brand-dark: #5c0c09;
  --brand-light: #fdefec;

  --gold: #e8b004;
  --gold-light: #fff7dd;
  --gold-deep: #a87c00;

  --ink: #2b1410;
  --ink-2: #502a22;
  --muted: #8f6a60;
  --muted-2: #b8998f;
  --line: #f4e2dc;
  --line-2: #faf1ee;
  --bg: #ffffff;
  --bg-soft: #fdf8f5;
  --bg-deep: #2e110d;

  --success: #1f9250;
  --success-text: #17713f;
  --success-sub: #2f7f4a;
  --danger: #cf1322;
  --danger-bg: #fdeceb;
  --danger-text: #a8071a;
  --danger-sub: #93371f;

  --accent-a: #f2913d;
  --accent-a-deep: #96520e;
  --accent-b: #3fa96b;
  --accent-b-deep: #17603a;
  --accent-c: #d48806;

  --shadow-rgb: 50, 20, 15;
}

/* ===================== 4. 金秋暖橙 · 中秋 / 国庆预热 ===================== */
html[data-theme="autumn"] {
  --brand: #d97706;
  --brand-rgb: 217, 119, 6;
  --brand-2: #f5a524;
  --brand-hover: #b45309;
  --brand-mid: #92400e;
  --brand-deep: #78350f;
  --brand-dark: #451a03;
  --brand-light: #fef3e2;

  --gold: #c2410c;
  --gold-light: #fdf0e4;
  --gold-deep: #7c2d12;

  --ink: #2a1a0c;
  --ink-2: #51361f;
  --muted: #8a6b4c;
  --muted-2: #b59a7e;
  --line: #f2e4d3;
  --line-2: #faf4ec;
  --bg: #ffffff;
  --bg-soft: #fdf9f3;
  --bg-deep: #2b1a09;

  --success: #15803d;
  --success-text: #166534;
  --success-sub: #2f7f4a;
  --danger: #c2410c;
  --danger-bg: #fdeee4;
  --danger-text: #9a3412;
  --danger-sub: #7c2d12;

  --accent-a: #e88b1a;
  --accent-a-deep: #8a4b08;
  --accent-b: #65a30d;
  --accent-b-deep: #3f6212;
  --accent-c: #9a3412;

  --shadow-rgb: 50, 32, 12;
}

/* ===================== 5. 端午青绿 · 端午 ===================== */
html[data-theme="dragon"] {
  --brand: #0d7a5f;
  --brand-rgb: 13, 122, 95;
  --brand-2: #17a67f;
  --brand-hover: #0a624c;
  --brand-mid: #075040;
  --brand-deep: #05412f;
  --brand-dark: #032b20;
  --brand-light: #e6f5f0;

  --gold: #c99700;
  --gold-light: #fdf5dd;
  --gold-deep: #8a6a00;

  --ink: #0c2420;
  --ink-2: #254a41;
  --muted: #5f8079;
  --muted-2: #93aba5;
  --line: #dcebe5;
  --line-2: #eef6f3;
  --bg: #ffffff;
  --bg-soft: #f5faf8;
  --bg-deep: #06261e;

  --success: #0f8a52;
  --success-text: #0b6b3f;
  --success-sub: #2f7f55;
  --danger: #c2410c;
  --danger-bg: #fdeee4;
  --danger-text: #9a3412;
  --danger-sub: #7c2d12;

  --accent-a: #2fa37e;
  --accent-a-deep: #0f5a44;
  --accent-b: #65a30d;
  --accent-b-deep: #3f6212;
  --accent-c: #a16207;

  --shadow-rgb: 12, 36, 32;
}

/* ===================== 6. 黑金尊享 · 周年庆 / 高端活动 ===================== */
html[data-theme="blackgold"] {
  --brand: #1a1a1a;
  --brand-rgb: 26, 26, 26;
  --brand-2: #4a4a4a;
  --brand-hover: #000000;
  --brand-mid: #2e2e2e;
  --brand-deep: #0d0d0d;
  --brand-dark: #000000;
  --brand-light: #f0f0f0;

  --gold: #c9a227;
  --gold-light: #fdf7e3;
  --gold-deep: #8a6f16;

  --ink: #141414;
  --ink-2: #3d3d3d;
  --muted: #737373;
  --muted-2: #a3a3a3;
  --line: #e2e2e2;
  --line-2: #f0f0f0;
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --bg-deep: #0f0f0f;

  --success: #0f8a52;
  --success-text: #0b6b3f;
  --success-sub: #2f7f55;
  --danger: #b4262a;
  --danger-bg: #fbe9e9;
  --danger-text: #8f1d20;
  --danger-sub: #78282a;

  --accent-a: #454545;
  --accent-a-deep: #1f1f1f;
  --accent-b: #8a7420;
  --accent-b-deep: #4d410f;
  --accent-c: #a16207;

  --shadow-rgb: 20, 20, 20;
}

/* ===================== 7. 科技紫 · 新品发布 ===================== */
html[data-theme="tech"] {
  --brand: #6b3ff5;
  --brand-rgb: 107, 63, 245;
  --brand-2: #9b6dff;
  --brand-hover: #5728dd;
  --brand-mid: #4a1fb8;
  --brand-deep: #3a1496;
  --brand-dark: #250d63;
  --brand-light: #f0ebff;

  --gold: #00c2d1;
  --gold-light: #e0fbff;
  --gold-deep: #00808a;

  --ink: #160f2e;
  --ink-2: #3b2c5c;
  --muted: #6f6491;
  --muted-2: #a29ab8;
  --line: #e8e3f7;
  --line-2: #f3f0fc;
  --bg: #ffffff;
  --bg-soft: #f8f6ff;
  --bg-deep: #150d2b;

  --success: #12a673;
  --success-text: #0f8058;
  --success-sub: #2f7f66;
  --danger: #d4387f;
  --danger-bg: #fdeaf3;
  --danger-text: #a81b58;
  --danger-sub: #93375f;

  --accent-a: #8b5cf6;
  --accent-a-deep: #4c1d95;
  --accent-b: #06b6d4;
  --accent-b-deep: #0e5f77;
  --accent-c: #d946ef;

  --shadow-rgb: 30, 20, 60;
}

/* ===================== 8. 环保绿 · 公益 / 低碳日 ===================== */
html[data-theme="green"] {
  --brand: #12a05e;
  --brand-rgb: 18, 160, 94;
  --brand-2: #3ecf86;
  --brand-hover: #0c8149;
  --brand-mid: #0a6b3d;
  --brand-deep: #07562f;
  --brand-dark: #043a20;
  --brand-light: #e7f7ef;

  --gold: #8bc34a;
  --gold-light: #f2f9e8;
  --gold-deep: #5d8a1f;

  --ink: #0d2418;
  --ink-2: #264a36;
  --muted: #5f8570;
  --muted-2: #94b0a1;
  --line: #dcefe4;
  --line-2: #eef7f2;
  --bg: #ffffff;
  --bg-soft: #f5faf7;
  --bg-deep: #06261a;

  --success: #0f8a52;
  --success-text: #0b6b3f;
  --success-sub: #2f7f55;
  --danger: #c2410c;
  --danger-bg: #fdeee4;
  --danger-text: #9a3412;
  --danger-sub: #7c2d12;

  --accent-a: #34b26c;
  --accent-a-deep: #14603a;
  --accent-b: #65a30d;
  --accent-b-deep: #3f6212;
  --accent-c: #a16207;

  --shadow-rgb: 13, 36, 24;
}

/* ===================== 9. 海洋青 · 清爽夏日 ===================== */
html[data-theme="ocean"] {
  --brand: #0a84c9;
  --brand-rgb: 10, 132, 201;
  --brand-2: #34b3f0;
  --brand-hover: #076ba5;
  --brand-mid: #05578a;
  --brand-deep: #04456f;
  --brand-dark: #022d4a;
  --brand-light: #e6f4fd;

  --gold: #00b8a9;
  --gold-light: #e0fbf8;
  --gold-deep: #00796f;

  --ink: #0b1f2e;
  --ink-2: #23445c;
  --muted: #5d8296;
  --muted-2: #93aebd;
  --line: #dae9f2;
  --line-2: #edf5fa;
  --bg: #ffffff;
  --bg-soft: #f4f9fd;
  --bg-deep: #051d2c;

  --success: #0f8a52;
  --success-text: #0b6b3f;
  --success-sub: #2f7f55;
  --danger: #d4380d;
  --danger-bg: #fdeee8;
  --danger-text: #a8200b;
  --danger-sub: #93371f;

  --accent-a: #22a7e0;
  --accent-a-deep: #0d5f85;
  --accent-b: #17b8a6;
  --accent-b-deep: #0b6a5f;
  --accent-c: #a16207;

  --shadow-rgb: 11, 31, 46;
}

/* ===================== 10. 庄严肃穆 · 黑白（全国哀悼日 / 重大突发事件） =====================
   说明：全站去彩 + 图片视频强制灰度，是国内哀悼日的通行做法。
        只对 img/video 加 filter（不加在 body 上），避免破坏吸顶导航的定位，
        因此手机端同样安全。 */
html[data-theme="mono"] {
  --brand: #333333;
  --brand-rgb: 51, 51, 51;
  --brand-2: #6b6b6b;
  --brand-hover: #1a1a1a;
  --brand-mid: #4d4d4d;
  --brand-deep: #222222;
  --brand-dark: #0d0d0d;
  --brand-light: #eeeeee;

  --gold: #666666;
  --gold-light: #f2f2f2;
  --gold-deep: #4d4d4d;

  --ink: #1a1a1a;
  --ink-2: #404040;
  --muted: #737373;
  --muted-2: #a3a3a3;
  --line: #e0e0e0;
  --line-2: #f0f0f0;
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --bg-deep: #141414;

  --success: #4d4d4d;
  --success-text: #404040;
  --success-sub: #666666;
  --danger: #4d4d4d;
  --danger-bg: #f0f0f0;
  --danger-text: #333333;
  --danger-sub: #666666;

  --accent-a: #7a7a7a;
  --accent-a-deep: #333333;
  --accent-b: #6b6b6b;
  --accent-b-deep: #2e2e2e;
  --accent-c: #808080;

  --shadow-rgb: 26, 26, 26;
}

/* 灰度滤镜：仅作用于图像视频，不影响布局与吸顶导航 */
html[data-theme="mono"] img,
html[data-theme="mono"] video,
html[data-theme="mono"] iframe,
html[data-theme="mono"] svg[data-grayscale="1"] {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
/* 哀悼日：关闭装饰动效，保持庄重 */
html[data-theme="mono"] * {
  animation-duration: .001ms !important;
  transition-duration: .001ms !important;
}

/* ===================== 特殊能力：界面形态（版式微调） =====================
   只改圆角尺度，不改配色，可与任意主题叠加使用。
   后台「主题皮肤 → 界面形态」选择后输出到 <html data-shape="...">。
   手机端同样生效（变量驱动，无需单独写 media query）。 */
html[data-shape="soft"]  { --radius:22px; --radius-lg:32px; --radius-sm:15px; }
html[data-shape="sharp"] { --radius:4px;  --radius-lg:6px;  --radius-sm:3px;  }

/* ===================== 特殊能力：自定义主题 =====================
   后台「自定义配色」保存后，色值会以行内 style 输出到 <html> 上，
   优先级高于这里的 data-theme，因此无需在此定义。 */

/* ===================== 主题过渡动效（切换不突兀） ===================== */
html[data-theme] body,
html[data-theme] .header-wrap,
html[data-theme] .card,
html[data-theme] .btn {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] * { transition: none !important; }
}