/* ============================================================
 * DDONE 行业风格模版 — 100 套标准色彩模板体系
 * 五大分类：行业品牌 / 经典奢华 / 自然色系 / 设计风格 / 节日季节
 * 每套主题通过 CSS 变量驱动，覆盖 banner / 卡片 / 按钮 / 状态色
 * 主题切换只需切换 [data-theme="xxx"] 属性
 * ============================================================ */

/* ============================================================
 * 第一类 · 行业品牌色（20 套）—— 真实世界顶级品牌的视觉规范
 * ============================================================ */

/* 京东红 - 默认 */
[data-theme="jd-red"] {
  --t-brand: #E2231A;
  --t-brand-hover: #C41E16;
  --t-brand-soft: rgba(226, 35, 26, 0.08);
  --t-grad-1: #f59e0b;
  --t-grad-2: #ef4444;
  --t-banner-1: #1a1a2e;
  --t-banner-2: #16213e;
  --t-banner-3: #0f3460;
  --t-accent: #f59e0b;
}

/* 淘宝橙 */
[data-theme="taobao-orange"] {
  --t-brand: #FF4400;
  --t-brand-hover: #E63E00;
  --t-brand-soft: rgba(255, 68, 0, 0.08);
  --t-grad-1: #FF6B35;
  --t-grad-2: #FF4400;
  --t-banner-1: #2d1810;
  --t-banner-2: #5c2e0a;
  --t-banner-3: #b8480c;
  --t-accent: #FF6B35;
}

/* 天猫红 */
[data-theme="tmall-red"] {
  --t-brand: #FF0036;
  --t-brand-hover: #E60030;
  --t-brand-soft: rgba(255, 0, 54, 0.08);
  --t-grad-1: #FF0036;
  --t-grad-2: #FF4081;
  --t-banner-1: #1a0508;
  --t-banner-2: #3d0a14;
  --t-banner-3: #b81647;
  --t-accent: #FF0036;
}

/* 阿里巴巴橙 */
[data-theme="alibaba-orange"] {
  --t-brand: #FF6A00;
  --t-brand-hover: #E55A00;
  --t-brand-soft: rgba(255, 106, 0, 0.08);
  --t-grad-1: #FF6A00;
  --t-grad-2: #FF9500;
  --t-banner-1: #2d1810;
  --t-banner-2: #5c2e0a;
  --t-banner-3: #b8480c;
  --t-accent: #FF9500;
}

/* 拼多多红橙 */
[data-theme="pdd-red"] {
  --t-brand: #E02020;
  --t-brand-hover: #C41818;
  --t-brand-soft: rgba(224, 32, 32, 0.08);
  --t-grad-1: #E02020;
  --t-grad-2: #FF6B35;
  --t-banner-1: #2a0808;
  --t-banner-2: #5c1818;
  --t-banner-3: #b82828;
  --t-accent: #FF6B35;
}

/* 美团黄 */
[data-theme="meituan-yellow"] {
  --t-brand: #FFD000;
  --t-brand-hover: #E6BC00;
  --t-brand-soft: rgba(255, 208, 0, 0.1);
  --t-grad-1: #FFD000;
  --t-grad-2: #FFB800;
  --t-banner-1: #1a1505;
  --t-banner-2: #3d3210;
  --t-banner-3: #876a14;
  --t-accent: #FFD000;
}

/* 饿了么蓝 */
[data-theme="eleme-blue"] {
  --t-brand: #0099FF;
  --t-brand-hover: #0088E6;
  --t-brand-soft: rgba(0, 153, 255, 0.08);
  --t-grad-1: #0099FF;
  --t-grad-2: #00C8FF;
  --t-banner-1: #001a33;
  --t-banner-2: #003366;
  --t-banner-3: #0066b3;
  --t-accent: #00C8FF;
}

/* 滴滴橙 */
[data-theme="didi-orange"] {
  --t-brand: #FF6900;
  --t-brand-hover: #E65E00;
  --t-brand-soft: rgba(255, 105, 0, 0.08);
  --t-grad-1: #FF6900;
  --t-grad-2: #FFB800;
  --t-banner-1: #2d1505;
  --t-banner-2: #5c2e0a;
  --t-banner-3: #b8480c;
  --t-accent: #FFB800;
}

/* 抖音红黑 */
[data-theme="douyin-red"] {
  --t-brand: #FE2C55;
  --t-brand-hover: #E5254B;
  --t-brand-soft: rgba(254, 44, 85, 0.08);
  --t-grad-1: #FE2C55;
  --t-grad-2: #25F4EE;
  --t-banner-1: #000000;
  --t-banner-2: #161616;
  --t-banner-3: #2a2a2a;
  --t-accent: #25F4EE;
}

/* 微信绿 */
[data-theme="wechat-green"] {
  --t-brand: #07C160;
  --t-brand-hover: #06AE56;
  --t-brand-soft: rgba(7, 193, 96, 0.08);
  --t-grad-1: #07C160;
  --t-grad-2: #5DC86A;
  --t-banner-1: #042413;
  --t-banner-2: #094826;
  --t-banner-3: #1d8c52;
  --t-accent: #07C160;
}

/* 支付宝蓝 */
[data-theme="alipay-blue"] {
  --t-brand: #1677FF;
  --t-brand-hover: #096DD9;
  --t-brand-soft: rgba(22, 119, 255, 0.08);
  --t-grad-1: #1677FF;
  --t-grad-2: #4096FF;
  --t-banner-1: #001a3d;
  --t-banner-2: #003580;
  --t-banner-3: #0058b3;
  --t-accent: #4096FF;
}

/* 百度蓝 */
[data-theme="baidu-blue"] {
  --t-brand: #2932E1;
  --t-brand-hover: #1F26C7;
  --t-brand-soft: rgba(41, 50, 225, 0.08);
  --t-grad-1: #2932E1;
  --t-grad-2: #5B6FFF;
  --t-banner-1: #050833;
  --t-banner-2: #0d1266;
  --t-banner-3: #2932E1;
  --t-accent: #5B6FFF;
}

/* 字节黑 */
[data-theme="bytedance-black"] {
  --t-brand: #1A1A1A;
  --t-brand-hover: #000000;
  --t-brand-soft: rgba(26, 26, 26, 0.1);
  --t-grad-1: #1A1A1A;
  --t-grad-2: #444444;
  --t-banner-1: #000000;
  --t-banner-2: #0d0d0d;
  --t-banner-3: #1f1f1f;
  --t-accent: #444444;
}

/* 网易红 */
[data-theme="netease-red"] {
  --t-brand: #C20C0C;
  --t-brand-hover: #A80A0A;
  --t-brand-soft: rgba(194, 12, 12, 0.08);
  --t-grad-1: #C20C0C;
  --t-grad-2: #E64545;
  --t-banner-1: #1f0505;
  --t-banner-2: #3d0a0a;
  --t-banner-3: #8a1212;
  --t-accent: #E64545;
}

/* 知乎蓝 */
[data-theme="zhihu-blue"] {
  --t-brand: #0084FF;
  --t-brand-hover: #0073E6;
  --t-brand-soft: rgba(0, 132, 255, 0.08);
  --t-grad-1: #0084FF;
  --t-grad-2: #33A1FF;
  --t-banner-1: #001a33;
  --t-banner-2: #003366;
  --t-banner-3: #0066b3;
  --t-accent: #33A1FF;
}

/* B站粉 */
[data-theme="bilibili-pink"] {
  --t-brand: #FB7299;
  --t-brand-hover: #E55F88;
  --t-brand-soft: rgba(251, 114, 153, 0.08);
  --t-grad-1: #FB7299;
  --t-grad-2: #FFC0CB;
  --t-banner-1: #1f0a10;
  --t-banner-2: #3d1424;
  --t-banner-3: #a04a6a;
  --t-accent: #00AEEC;
}

/* 小米橙 */
[data-theme="xiaomi-orange"] {
  --t-brand: #FF6700;
  --t-brand-hover: #E65A00;
  --t-brand-soft: rgba(255, 103, 0, 0.08);
  --t-grad-1: #FF6700;
  --t-grad-2: #FF8800;
  --t-banner-1: #2d1805;
  --t-banner-2: #5c300a;
  --t-banner-3: #b8480c;
  --t-accent: #FF8800;
}

/* 华为红 */
[data-theme="huawei-red"] {
  --t-brand: #C7000B;
  --t-brand-hover: #A80009;
  --t-brand-soft: rgba(199, 0, 11, 0.08);
  --t-grad-1: #C7000B;
  --t-grad-2: #FF1F2D;
  --t-banner-1: #1f0508;
  --t-banner-2: #3d0a10;
  --t-banner-3: #b81622;
  --t-accent: #FF1F2D;
}

/* 苹果灰 */
[data-theme="apple-gray"] {
  --t-brand: #0071E3;
  --t-brand-hover: #0066CC;
  --t-brand-soft: rgba(0, 113, 227, 0.08);
  --t-grad-1: #0071E3;
  --t-grad-2: #5AC8FA;
  --t-banner-1: #1d1d1f;
  --t-banner-2: #2c2c2e;
  --t-banner-3: #3a3a3c;
  --t-accent: #5AC8FA;
}

/* 星巴克绿 */
[data-theme="starbucks-green"] {
  --t-brand: #006241;
  --t-brand-hover: #1E3932;
  --t-brand-soft: rgba(0, 98, 65, 0.08);
  --t-grad-1: #006241;
  --t-grad-2: #1E3932;
  --t-banner-1: #021410;
  --t-banner-2: #052820;
  --t-banner-3: #0e4a36;
  --t-accent: #C2A77A;
}

/* ============================================================
 * 第二类 · 经典奢华色（20 套）—— 高端商务 / 顶级品牌的奢华质感
 * ============================================================ */

/* 香槟金 */
[data-theme="champagne"] {
  --t-brand: #C9A961;
  --t-brand-hover: #B8964E;
  --t-brand-soft: rgba(201, 169, 97, 0.1);
  --t-grad-1: #C9A961;
  --t-grad-2: #E8D7A1;
  --t-banner-1: #1a1308;
  --t-banner-2: #3d2e0f;
  --t-banner-3: #876b1c;
  --t-accent: #C9A961;
}

/* 玫瑰金 */
[data-theme="rose-gold"] {
  --t-brand: #B76E79;
  --t-brand-hover: #9D5C66;
  --t-brand-soft: rgba(183, 110, 121, 0.1);
  --t-grad-1: #B76E79;
  --t-grad-2: #E8C2C7;
  --t-banner-1: #1f1014;
  --t-banner-2: #3d1f28;
  --t-banner-3: #8a4a55;
  --t-accent: #B76E79;
}

/* 黑金 */
[data-theme="black-gold"] {
  --t-brand: #D4AF37;
  --t-brand-hover: #B8941F;
  --t-brand-soft: rgba(212, 175, 55, 0.1);
  --t-grad-1: #D4AF37;
  --t-grad-2: #FFD700;
  --t-banner-1: #000000;
  --t-banner-2: #0d0d0d;
  --t-banner-3: #1a1a1a;
  --t-accent: #D4AF37;
}

/* 紫金 */
[data-theme="purple-gold"] {
  --t-brand: #6B4226;
  --t-brand-hover: #8B5A2B;
  --t-brand-soft: rgba(107, 66, 38, 0.1);
  --t-grad-1: #6B4226;
  --t-grad-2: #D4AF37;
  --t-banner-1: #10080a;
  --t-banner-2: #2a1a20;
  --t-banner-3: #5e3852;
  --t-accent: #D4AF37;
}

/* 勃艮第红 */
[data-theme="burgundy"] {
  --t-brand: #7C2128;
  --t-brand-hover: #5D1820;
  --t-brand-soft: rgba(124, 33, 40, 0.1);
  --t-grad-1: #7C2128;
  --t-grad-2: #B54048;
  --t-banner-1: #1a0508;
  --t-banner-2: #330d10;
  --t-banner-3: #7C2128;
  --t-accent: #B54048;
}

/* 普鲁士蓝 */
[data-theme="prussian-blue"] {
  --t-brand: #003153;
  --t-brand-hover: #002240;
  --t-brand-soft: rgba(0, 49, 83, 0.1);
  --t-grad-1: #003153;
  --t-grad-2: #1E5470;
  --t-banner-1: #000a14;
  --t-banner-2: #001a2e;
  --t-banner-3: #003153;
  --t-accent: #1E5470;
}

/* 钻石银 */
[data-theme="diamond-silver"] {
  --t-brand: #71797E;
  --t-brand-hover: #5C6366;
  --t-brand-soft: rgba(113, 121, 126, 0.1);
  --t-grad-1: #71797E;
  --t-grad-2: #C0C0C0;
  --t-banner-1: #1a1a1c;
  --t-banner-2: #2d2d30;
  --t-banner-3: #4d4d52;
  --t-accent: #71797E;
}

/* 象牙白 */
[data-theme="ivory"] {
  --t-brand: #C5B358;
  --t-brand-hover: #A89844;
  --t-brand-soft: rgba(197, 179, 88, 0.1);
  --t-grad-1: #C5B358;
  --t-grad-2: #E8DCB0;
  --t-banner-1: #1f1d10;
  --t-banner-2: #3d3820;
  --t-banner-3: #876e1c;
  --t-accent: #C5B358;
}

/* 翡翠绿 */
[data-theme="emerald"] {
  --t-brand: #046307;
  --t-brand-hover: #034605;
  --t-brand-soft: rgba(4, 99, 7, 0.1);
  --t-grad-1: #046307;
  --t-grad-2: #1B8C20;
  --t-banner-1: #011404;
  --t-banner-2: #052808;
  --t-banner-3: #0d4a10;
  --t-accent: #1B8C20;
}

/* 蓝宝石 */
[data-theme="sapphire"] {
  --t-brand: #0F52BA;
  --t-brand-hover: #0A3D8C;
  --t-brand-soft: rgba(15, 82, 186, 0.1);
  --t-grad-1: #0F52BA;
  --t-grad-2: #2C7CD6;
  --t-banner-1: #020a1a;
  --t-banner-2: #051533;
  --t-banner-3: #0F52BA;
  --t-accent: #2C7CD6;
}

/* 红宝石 */
[data-theme="ruby"] {
  --t-brand: #9B111E;
  --t-brand-hover: #7C0E18;
  --t-brand-soft: rgba(155, 17, 30, 0.1);
  --t-grad-1: #9B111E;
  --t-grad-2: #C41E3A;
  --t-banner-1: #1f0408;
  --t-banner-2: #3d0a10;
  --t-banner-3: #9B111E;
  --t-accent: #C41E3A;
}

/* 玉石绿 */
[data-theme="jade-green"] {
  --t-brand: #00A86B;
  --t-brand-hover: #008F5C;
  --t-brand-soft: rgba(0, 168, 107, 0.1);
  --t-grad-1: #00A86B;
  --t-grad-2: #5BC09A;
  --t-banner-1: #01140d;
  --t-banner-2: #05281a;
  --t-banner-3: #0d4a30;
  --t-accent: #00A86B;
}

/* 紫水晶 */
[data-theme="amethyst"] {
  --t-brand: #9966CC;
  --t-brand-hover: #7E52B0;
  --t-brand-soft: rgba(153, 102, 204, 0.1);
  --t-grad-1: #9966CC;
  --t-grad-2: #C4A2E0;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #5e3890;
  --t-accent: #9966CC;
}

/* 焦糖棕 */
[data-theme="caramel"] {
  --t-brand: #A0522D;
  --t-brand-hover: #8B4513;
  --t-brand-soft: rgba(160, 82, 45, 0.1);
  --t-grad-1: #A0522D;
  --t-grad-2: #CD853F;
  --t-banner-1: #1f0e05;
  --t-banner-2: #3d1d0a;
  --t-banner-3: #8a4520;
  --t-accent: #A0522D;
}

/* 烟灰 */
[data-theme="smoke-gray"] {
  --t-brand: #848884;
  --t-brand-hover: #6e7169;
  --t-brand-soft: rgba(132, 136, 132, 0.1);
  --t-grad-1: #848884;
  --t-grad-2: #B0B0B0;
  --t-banner-1: #1a1a1a;
  --t-banner-2: #2d2d2d;
  --t-banner-3: #4d4d4d;
  --t-accent: #848884;
}

/* 深酒红 */
[data-theme="wine-red"] {
  --t-brand: #722F37;
  --t-brand-hover: #5C252C;
  --t-brand-soft: rgba(114, 47, 55, 0.1);
  --t-grad-1: #722F37;
  --t-grad-2: #A04552;
  --t-banner-1: #1a080d;
  --t-banner-2: #33101a;
  --t-banner-3: #722F37;
  --t-accent: #A04552;
}

/* 午夜蓝 */
[data-theme="midnight-blue"] {
  --t-brand: #191970;
  --t-brand-hover: #0F0F50;
  --t-brand-soft: rgba(25, 25, 112, 0.1);
  --t-grad-1: #191970;
  --t-grad-2: #3A3AB8;
  --t-banner-1: #020214;
  --t-banner-2: #0a0a2e;
  --t-banner-3: #191970;
  --t-accent: #3A3AB8;
}

/* 孔雀蓝 */
[data-theme="peacock-blue"] {
  --t-brand: #005F69;
  --t-brand-hover: #004A52;
  --t-brand-soft: rgba(0, 95, 105, 0.1);
  --t-grad-1: #005F69;
  --t-grad-2: #0090A1;
  --t-banner-1: #01181d;
  --t-banner-2: #053038;
  --t-banner-3: #006470;
  --t-accent: #0090A1;
}

/* 雾霾蓝 */
[data-theme="dusty-blue"] {
  --t-brand: #6A8DAD;
  --t-brand-hover: #547390;
  --t-brand-soft: rgba(106, 141, 173, 0.1);
  --t-grad-1: #6A8DAD;
  --t-grad-2: #A1BBD0;
  --t-banner-1: #10171f;
  --t-banner-2: #202d3d;
  --t-banner-3: #5a7593;
  --t-accent: #6A8DAD;
}

/* 暮色紫 */
[data-theme="dusk-purple"] {
  --t-brand: #663399;
  --t-brand-hover: #50247A;
  --t-brand-soft: rgba(102, 51, 153, 0.1);
  --t-grad-1: #663399;
  --t-grad-2: #9B59B6;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #5e2890;
  --t-accent: #9B59B6;
}

/* ============================================================
 * 第三类 · 自然色系（20 套）—— 自然 / 季节 / 植物灵感
 * ============================================================ */

/* 海洋蓝 */
[data-theme="ocean-blue"] {
  --t-brand: #006994;
  --t-brand-hover: #005377;
  --t-brand-soft: rgba(0, 105, 148, 0.1);
  --t-grad-1: #006994;
  --t-grad-2: #13A1D6;
  --t-banner-1: #011823;
  --t-banner-2: #053047;
  --t-banner-3: #006994;
  --t-accent: #13A1D6;
}

/* 森林绿 */
[data-theme="forest-green"] {
  --t-brand: #228B22;
  --t-brand-hover: #1B741B;
  --t-brand-soft: rgba(34, 139, 34, 0.1);
  --t-grad-1: #228B22;
  --t-grad-2: #3CB371;
  --t-banner-1: #051405;
  --t-banner-2: #0d280d;
  --t-banner-3: #228B22;
  --t-accent: #3CB371;
}

/* 天空蓝 */
[data-theme="sky-blue"] {
  --t-brand: #87CEEB;
  --t-brand-hover: #6BB6D3;
  --t-brand-soft: rgba(135, 206, 235, 0.15);
  --t-grad-1: #87CEEB;
  --t-grad-2: #B0E0E6;
  --t-banner-1: #0d2030;
  --t-banner-2: #1a3d52;
  --t-banner-3: #5b9bbd;
  --t-accent: #87CEEB;
}

/* 沙漠金 */
[data-theme="desert-gold"] {
  --t-brand: #D2A679;
  --t-brand-hover: #B8895C;
  --t-brand-soft: rgba(210, 166, 121, 0.15);
  --t-grad-1: #D2A679;
  --t-grad-2: #E8C9A0;
  --t-banner-1: #1f1408;
  --t-banner-2: #3d2810;
  --t-banner-3: #876a1c;
  --t-accent: #D2A679;
}

/* 樱花 */
[data-theme="sakura-pink"] {
  --t-brand: #FFB7C5;
  --t-brand-hover: #FF9CAE;
  --t-brand-soft: rgba(255, 183, 197, 0.15);
  --t-grad-1: #FFB7C5;
  --t-grad-2: #FFD1DC;
  --t-banner-1: #1f0a14;
  --t-banner-2: #3d1424;
  --t-banner-3: #a04a6a;
  --t-accent: #FFB7C5;
}

/* 薰衣草 */
[data-theme="lavender"] {
  --t-brand: #967BB6;
  --t-brand-hover: #7E64A0;
  --t-brand-soft: rgba(150, 123, 182, 0.12);
  --t-grad-1: #967BB6;
  --t-grad-2: #C3B1D8;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #5e3890;
  --t-accent: #967BB6;
}

/* 薄荷绿 */
[data-theme="mint-green"] {
  --t-brand: #3EB489;
  --t-brand-hover: #2E9C72;
  --t-brand-soft: rgba(62, 180, 137, 0.12);
  --t-grad-1: #3EB489;
  --t-grad-2: #79D6B5;
  --t-banner-1: #052818;
  --t-banner-2: #0d4a30;
  --t-banner-3: #2e9c72;
  --t-accent: #3EB489;
}

/* 桃花 */
[data-theme="peach-blossom"] {
  --t-brand: #F8C8B4;
  --t-brand-hover: #E5B098;
  --t-brand-soft: rgba(248, 200, 180, 0.15);
  --t-grad-1: #F8C8B4;
  --t-grad-2: #FBE0D2;
  --t-banner-1: #1f100a;
  --t-banner-2: #3d2014;
  --t-banner-3: #87613d;
  --t-accent: #F8C8B4;
}

/* 麦田 */
[data-theme="wheat-field"] {
  --t-brand: #DAA520;
  --t-brand-hover: #B8860B;
  --t-brand-soft: rgba(218, 165, 32, 0.12);
  --t-grad-1: #DAA520;
  --t-grad-2: #F0C967;
  --t-banner-1: #1f1505;
  --t-banner-2: #3d2a0a;
  --t-banner-3: #876314;
  --t-accent: #DAA520;
}

/* 雪山白 */
[data-theme="snow-white"] {
  --t-brand: #B0C4DE;
  --t-brand-hover: #91A8C7;
  --t-brand-soft: rgba(176, 196, 222, 0.15);
  --t-grad-1: #B0C4DE;
  --t-grad-2: #D6E4F0;
  --t-banner-1: #1a2030;
  --t-banner-2: #2d3d52;
  --t-banner-3: #5e7593;
  --t-accent: #B0C4DE;
}

/* 葡萄园紫 */
[data-theme="vineyard-purple"] {
  --t-brand: #4B0082;
  --t-brand-hover: #380062;
  --t-brand-soft: rgba(75, 0, 130, 0.12);
  --t-grad-1: #4B0082;
  --t-grad-2: #8A2BE2;
  --t-banner-1: #0d021a;
  --t-banner-2: #1f0533;
  --t-banner-3: #4B0082;
  --t-accent: #8A2BE2;
}

/* 苔藓绿 */
[data-theme="moss-green"] {
  --t-brand: #8A9A5B;
  --t-brand-hover: #6F7E47;
  --t-brand-soft: rgba(138, 154, 91, 0.12);
  --t-grad-1: #8A9A5B;
  --t-grad-2: #B5C388;
  --t-banner-1: #101408;
  --t-banner-2: #202810;
  --t-banner-3: #5e6f30;
  --t-accent: #8A9A5B;
}

/* 珊瑚 */
[data-theme="coral"] {
  --t-brand: #FF7F50;
  --t-brand-hover: #E66E3F;
  --t-brand-soft: rgba(255, 127, 80, 0.12);
  --t-grad-1: #FF7F50;
  --t-grad-2: #FFA07A;
  --t-banner-1: #1f0d05;
  --t-banner-2: #3d1d0a;
  --t-banner-3: #b85d2e;
  --t-accent: #FF7F50;
}

/* 玄武岩黑 */
[data-theme="basalt-black"] {
  --t-brand: #2F4F4F;
  --t-brand-hover: #1F3838;
  --t-brand-soft: rgba(47, 79, 79, 0.15);
  --t-grad-1: #2F4F4F;
  --t-grad-2: #5F8A8A;
  --t-banner-1: #050d0d;
  --t-banner-2: #0d1f1f;
  --t-banner-3: #2F4F4F;
  --t-accent: #5F8A8A;
}

/* 银灰 */
[data-theme="silver-gray"] {
  --t-brand: #A8A8A8;
  --t-brand-hover: #888888;
  --t-brand-soft: rgba(168, 168, 168, 0.15);
  --t-grad-1: #A8A8A8;
  --t-grad-2: #D5D5D5;
  --t-banner-1: #1a1a1a;
  --t-banner-2: #2d2d2d;
  --t-banner-3: #5e5e5e;
  --t-accent: #A8A8A8;
}

/* 黄昏橙 */
[data-theme="sunset-orange"] {
  --t-brand: #FF6347;
  --t-brand-hover: #E5523A;
  --t-brand-soft: rgba(255, 99, 71, 0.12);
  --t-grad-1: #FF6347;
  --t-grad-2: #FFA07A;
  --t-banner-1: #1f0a05;
  --t-banner-2: #3d140a;
  --t-banner-3: #b8452e;
  --t-accent: #FF6347;
}

/* 极光 */
[data-theme="aurora"] {
  --t-brand: #00FF87;
  --t-brand-hover: #00E078;
  --t-brand-soft: rgba(0, 255, 135, 0.1);
  --t-grad-1: #00FF87;
  --t-grad-2: #60E1FF;
  --t-banner-1: #001a14;
  --t-banner-2: #003828;
  --t-banner-3: #00B894;
  --t-accent: #60E1FF;
}

/* 枫叶红 */
[data-theme="maple-red"] {
  --t-brand: #D2691E;
  --t-brand-hover: #B85A18;
  --t-brand-soft: rgba(210, 105, 30, 0.12);
  --t-grad-1: #D2691E;
  --t-grad-2: #FF8C42;
  --t-banner-1: #1f0d05;
  --t-banner-2: #3d1d0a;
  --t-banner-3: #b85d1c;
  --t-accent: #D2691E;
}

/* 橄榄绿 */
[data-theme="olive-green"] {
  --t-brand: #808000;
  --t-brand-hover: #686800;
  --t-brand-soft: rgba(128, 128, 0, 0.12);
  --t-grad-1: #808000;
  --t-grad-2: #ADAD2D;
  --t-banner-1: #0d0d00;
  --t-banner-2: #1a1a00;
  --t-banner-3: #5e5e00;
  --t-accent: #808000;
}

/* 兰花紫 */
[data-theme="orchid-purple"] {
  --t-brand: #DA70D6;
  --t-brand-hover: #C455C0;
  --t-brand-soft: rgba(218, 112, 214, 0.12);
  --t-grad-1: #DA70D6;
  --t-grad-2: #EE9CEE;
  --t-banner-1: #1f0a1f;
  --t-banner-2: #3d143d;
  --t-banner-3: #8a4a8a;
  --t-accent: #DA70D6;
}

/* ============================================================
 * 第四类 · 设计风格色（20 套）—— Material Design / 平面设计 / 现代极简
 * ============================================================ */

/* Material Indigo */
[data-theme="material-indigo"] {
  --t-brand: #3F51B5;
  --t-brand-hover: #303F9F;
  --t-brand-soft: rgba(63, 81, 181, 0.1);
  --t-grad-1: #3F51B5;
  --t-grad-2: #5C6BC0;
  --t-banner-1: #0a0e2e;
  --t-banner-2: #14193d;
  --t-banner-3: #3F51B5;
  --t-accent: #5C6BC0;
}

/* Material Teal */
[data-theme="material-teal"] {
  --t-brand: #009688;
  --t-brand-hover: #00796B;
  --t-brand-soft: rgba(0, 150, 136, 0.1);
  --t-grad-1: #009688;
  --t-grad-2: #26A69A;
  --t-banner-1: #001a17;
  --t-banner-2: #003830;
  --t-banner-3: #009688;
  --t-accent: #26A69A;
}

/* Material Pink */
[data-theme="material-pink"] {
  --t-brand: #E91E63;
  --t-brand-hover: #C2185B;
  --t-brand-soft: rgba(233, 30, 99, 0.1);
  --t-grad-1: #E91E63;
  --t-grad-2: #F06292;
  --t-banner-1: #1f0510;
  --t-banner-2: #3d0a1f;
  --t-banner-3: #E91E63;
  --t-accent: #F06292;
}

/* Material Amber */
[data-theme="material-amber"] {
  --t-brand: #FFC107;
  --t-brand-hover: #FFA000;
  --t-brand-soft: rgba(255, 193, 7, 0.12);
  --t-grad-1: #FFC107;
  --t-grad-2: #FFD54F;
  --t-banner-1: #1f1700;
  --t-banner-2: #3d2d00;
  --t-banner-3: #876614;
  --t-accent: #FFC107;
}

/* Material Cyan */
[data-theme="material-cyan"] {
  --t-brand: #00BCD4;
  --t-brand-hover: #0097A7;
  --t-brand-soft: rgba(0, 188, 212, 0.1);
  --t-grad-1: #00BCD4;
  --t-grad-2: #4DD0E1;
  --t-banner-1: #001a1f;
  --t-banner-2: #003540;
  --t-banner-3: #00BCD4;
  --t-accent: #4DD0E1;
}

/* Material Deep Purple */
[data-theme="material-deep-purple"] {
  --t-brand: #673AB7;
  --t-brand-hover: #512DA8;
  --t-brand-soft: rgba(103, 58, 183, 0.1);
  --t-grad-1: #673AB7;
  --t-grad-2: #9575CD;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #673AB7;
  --t-accent: #9575CD;
}

/* Tailwind Blue */
[data-theme="tailwind-blue"] {
  --t-brand: #2563EB;
  --t-brand-hover: #1D4ED8;
  --t-brand-soft: rgba(37, 99, 235, 0.1);
  --t-grad-1: #2563EB;
  --t-grad-2: #60A5FA;
  --t-banner-1: #050d1f;
  --t-banner-2: #0d1a3d;
  --t-banner-3: #2563EB;
  --t-accent: #60A5FA;
}

/* Tailwind Emerald */
[data-theme="tailwind-emerald"] {
  --t-brand: #10B981;
  --t-brand-hover: #059669;
  --t-brand-soft: rgba(16, 185, 129, 0.1);
  --t-grad-1: #10B981;
  --t-grad-2: #34D399;
  --t-banner-1: #01140d;
  --t-banner-2: #05281a;
  --t-banner-3: #10B981;
  --t-accent: #34D399;
}

/* Tailwind Rose */
[data-theme="tailwind-rose"] {
  --t-brand: #F43F5E;
  --t-brand-hover: #E11D48;
  --t-brand-soft: rgba(244, 63, 94, 0.1);
  --t-grad-1: #F43F5E;
  --t-grad-2: #FB7185;
  --t-banner-1: #1f0510;
  --t-banner-2: #3d0a1f;
  --t-banner-3: #F43F5E;
  --t-accent: #FB7185;
}

/* Tailwind Violet */
[data-theme="tailwind-violet"] {
  --t-brand: #8B5CF6;
  --t-brand-hover: #7C3AED;
  --t-brand-soft: rgba(139, 92, 246, 0.1);
  --t-grad-1: #8B5CF6;
  --t-grad-2: #A78BFA;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #8B5CF6;
  --t-accent: #A78BFA;
}

/* Tailwind Amber */
[data-theme="tailwind-amber"] {
  --t-brand: #F59E0B;
  --t-brand-hover: #D97706;
  --t-brand-soft: rgba(245, 158, 11, 0.1);
  --t-grad-1: #F59E0B;
  --t-grad-2: #FBBF24;
  --t-banner-1: #1f1505;
  --t-banner-2: #3d2a0a;
  --t-banner-3: #876314;
  --t-accent: #FBBF24;
}

/* Tailwind Slate */
[data-theme="tailwind-slate"] {
  --t-brand: #475569;
  --t-brand-hover: #334155;
  --t-brand-soft: rgba(71, 85, 105, 0.12);
  --t-grad-1: #475569;
  --t-grad-2: #64748B;
  --t-banner-1: #0f172a;
  --t-banner-2: #1e293b;
  --t-banner-3: #475569;
  --t-accent: #64748B;
}

/* Fluent Blue */
[data-theme="fluent-blue"] {
  --t-brand: #0078D4;
  --t-brand-hover: #006ABC;
  --t-brand-soft: rgba(0, 120, 212, 0.1);
  --t-grad-1: #0078D4;
  --t-grad-2: #2B88D8;
  --t-banner-1: #001a2e;
  --t-banner-2: #003355;
  --t-banner-3: #0078D4;
  --t-accent: #2B88D8;
}

/* Fluent Purple */
[data-theme="fluent-purple"] {
  --t-brand: #8E44AD;
  --t-brand-hover: #783996;
  --t-brand-soft: rgba(142, 68, 173, 0.12);
  --t-grad-1: #8E44AD;
  --t-grad-2: #B17AC9;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #8E44AD;
  --t-accent: #B17AC9;
}

/* IBM Carbon */
[data-theme="ibm-carbon"] {
  --t-brand: #0F62FE;
  --t-brand-hover: #0353E9;
  --t-brand-soft: rgba(15, 98, 254, 0.1);
  --t-grad-1: #0F62FE;
  --t-grad-2: #4589FF;
  --t-banner-1: #000d33;
  --t-banner-2: #001d6b;
  --t-banner-3: #0F62FE;
  --t-accent: #4589FF;
}

/* Bootstrap Blue */
[data-theme="bootstrap-blue"] {
  --t-brand: #0D6EFD;
  --t-brand-hover: #0A58CA;
  --t-brand-soft: rgba(13, 110, 253, 0.1);
  --t-grad-1: #0D6EFD;
  --t-grad-2: #6EA8FE;
  --t-banner-1: #001a3d;
  --t-banner-2: #003580;
  --t-banner-3: #0D6EFD;
  --t-accent: #6EA8FE;
}

/* Bulma Turquoise */
[data-theme="bulma-turquoise"] {
  --t-brand: #00D1B2;
  --t-brand-hover: #00B89C;
  --t-brand-soft: rgba(0, 209, 178, 0.1);
  --t-grad-1: #00D1B2;
  --t-grad-2: #5FE3CC;
  --t-banner-1: #001a17;
  --t-banner-2: #003830;
  --t-banner-3: #00B89C;
  --t-accent: #00D1B2;
}

/* Element Plus */
[data-theme="element-blue"] {
  --t-brand: #409EFF;
  --t-brand-hover: #337ECC;
  --t-brand-soft: rgba(64, 158, 255, 0.1);
  --t-grad-1: #409EFF;
  --t-grad-2: #79BBFF;
  --t-banner-1: #001a33;
  --t-banner-2: #003366;
  --t-banner-3: #409EFF;
  --t-accent: #79BBFF;
}

/* Ant Design Blue */
[data-theme="antd-blue"] {
  --t-brand: #1890FF;
  --t-brand-hover: #096DD9;
  --t-brand-soft: rgba(24, 144, 255, 0.1);
  --t-grad-1: #1890FF;
  --t-grad-2: #40A9FF;
  --t-banner-1: #001a3d;
  --t-banner-2: #003580;
  --t-banner-3: #1890FF;
  --t-accent: #40A9FF;
}

/* Chakra Purple */
[data-theme="chakra-purple"] {
  --t-brand: #805AD5;
  --t-brand-hover: #6B46C1;
  --t-brand-soft: rgba(128, 90, 213, 0.1);
  --t-grad-1: #805AD5;
  --t-grad-2: #B794F4;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #805AD5;
  --t-accent: #B794F4;
}

/* ============================================================
 * 第五类 · 节日季节色（20 套）—— 节日 / 季节 / 特殊场景主题
 * ============================================================ */

/* 春节红 */
[data-theme="spring-festival"] {
  --t-brand: #C8102E;
  --t-brand-hover: #A00D24;
  --t-brand-soft: rgba(200, 16, 46, 0.1);
  --t-grad-1: #C8102E;
  --t-grad-2: #FFD700;
  --t-banner-1: #1f0508;
  --t-banner-2: #3d0a10;
  --t-banner-3: #C8102E;
  --t-accent: #FFD700;
}

/* 元宵 */
[data-theme="lantern-festival"] {
  --t-brand: #FF4500;
  --t-brand-hover: #E63D00;
  --t-brand-soft: rgba(255, 69, 0, 0.12);
  --t-grad-1: #FF4500;
  --t-grad-2: #FFA500;
  --t-banner-1: #1f0a05;
  --t-banner-2: #3d140a;
  --t-banner-3: #FF4500;
  --t-accent: #FFA500;
}

/* 圣诞 */
[data-theme="christmas"] {
  --t-brand: #C41E3A;
  --t-brand-hover: #A01728;
  --t-brand-soft: rgba(196, 30, 58, 0.1);
  --t-grad-1: #C41E3A;
  --t-grad-2: #165B33;
  --t-banner-1: #1f0510;
  --t-banner-2: #330a18;
  --t-banner-3: #C41E3A;
  --t-accent: #165B33;
}

/* 万圣节 */
[data-theme="halloween"] {
  --t-brand: #FF6600;
  --t-brand-hover: #E65C00;
  --t-brand-soft: rgba(255, 102, 0, 0.12);
  --t-grad-1: #FF6600;
  --t-grad-2: #8B00FF;
  --t-banner-1: #1f0a00;
  --t-banner-2: #3d1f00;
  --t-banner-3: #FF6600;
  --t-accent: #8B00FF;
}

/* 感恩节 */
[data-theme="thanksgiving"] {
  --t-brand: #B8860B;
  --t-brand-hover: #9C7109;
  --t-brand-soft: rgba(184, 134, 11, 0.12);
  --t-grad-1: #B8860B;
  --t-grad-2: #D2691E;
  --t-banner-1: #1f1505;
  --t-banner-2: #3d2a0a;
  --t-banner-3: #876314;
  --t-accent: #D2691E;
}

/* 情人节 */
[data-theme="valentine"] {
  --t-brand: #E91E63;
  --t-brand-hover: #C2185B;
  --t-brand-soft: rgba(233, 30, 99, 0.12);
  --t-grad-1: #E91E63;
  --t-grad-2: #FF4081;
  --t-banner-1: #1f0510;
  --t-banner-2: #3d0a1f;
  --t-banner-3: #E91E63;
  --t-accent: #FF4081;
}

/* 母亲节 */
[data-theme="mothers-day"] {
  --t-brand: #FF69B4;
  --t-brand-hover: #E55CA0;
  --t-brand-soft: rgba(255, 105, 180, 0.12);
  --t-grad-1: #FF69B4;
  --t-grad-2: #FFB6C1;
  --t-banner-1: #1f0a14;
  --t-banner-2: #3d1424;
  --t-banner-3: #a04a6a;
  --t-accent: #FF69B4;
}

/* 父亲节 */
[data-theme="fathers-day"] {
  --t-brand: #1E3A8A;
  --t-brand-hover: #152C6D;
  --t-brand-soft: rgba(30, 58, 138, 0.12);
  --t-grad-1: #1E3A8A;
  --t-grad-2: #3B5BDB;
  --t-banner-1: #020a1f;
  --t-banner-2: #051533;
  --t-banner-3: #1E3A8A;
  --t-accent: #3B5BDB;
}

/* 春季 */
[data-theme="spring-season"] {
  --t-brand: #52C41A;
  --t-brand-hover: #389E0D;
  --t-brand-soft: rgba(82, 196, 26, 0.1);
  --t-grad-1: #52C41A;
  --t-grad-2: #FF85C0;
  --t-banner-1: #051408;
  --t-banner-2: #0d2810;
  --t-banner-3: #52C41A;
  --t-accent: #FF85C0;
}

/* 夏季 */
[data-theme="summer-season"] {
  --t-brand: #13C2C2;
  --t-brand-hover: #08979C;
  --t-brand-soft: rgba(19, 194, 194, 0.1);
  --t-grad-1: #13C2C2;
  --t-grad-2: #FAAD14;
  --t-banner-1: #011a1a;
  --t-banner-2: #053838;
  --t-banner-3: #13C2C2;
  --t-accent: #FAAD14;
}

/* 秋季 */
[data-theme="autumn-season"] {
  --t-brand: #D4380D;
  --t-brand-hover: #AD2E0B;
  --t-brand-soft: rgba(212, 56, 13, 0.12);
  --t-grad-1: #D4380D;
  --t-grad-2: #D4B106;
  --t-banner-1: #1f0a05;
  --t-banner-2: #3d140a;
  --t-banner-3: #D4380D;
  --t-accent: #D4B106;
}

/* 冬季 */
[data-theme="winter-season"] {
  --t-brand: #2F54EB;
  --t-brand-hover: #1D39C4;
  --t-brand-soft: rgba(47, 84, 235, 0.1);
  --t-grad-1: #2F54EB;
  --t-grad-2: #BAE0FF;
  --t-banner-1: #050d1f;
  --t-banner-2: #0d1a3d;
  --t-banner-3: #2F54EB;
  --t-accent: #BAE0FF;
}

/* 中秋 */
[data-theme="mid-autumn"] {
  --t-brand: #FA8C16;
  --t-brand-hover: #D46B08;
  --t-brand-soft: rgba(250, 140, 22, 0.12);
  --t-grad-1: #FA8C16;
  --t-grad-2: #D4380D;
  --t-banner-1: #1f1005;
  --t-banner-2: #3d200a;
  --t-banner-3: #FA8C16;
  --t-accent: #D4380D;
}

/* 端午 */
[data-theme="dragon-boat"] {
  --t-brand: #389E0D;
  --t-brand-hover: #237804;
  --t-brand-soft: rgba(56, 158, 13, 0.1);
  --t-grad-1: #389E0D;
  --t-grad-2: #D4380D;
  --t-banner-1: #051408;
  --t-banner-2: #0d2810;
  --t-banner-3: #389E0D;
  --t-accent: #D4380D;
}

/* 七夕 */
[data-theme="qixi"] {
  --t-brand: #FF85C0;
  --t-brand-hover: #E56FA8;
  --t-brand-soft: rgba(255, 133, 192, 0.12);
  --t-grad-1: #FF85C0;
  --t-grad-2: #9254DE;
  --t-banner-1: #1f0a14;
  --t-banner-2: #3d1424;
  --t-banner-3: #a04a6a;
  --t-accent: #9254DE;
}

/* 国庆 */
[data-theme="national-day"] {
  --t-brand: #DE2910;
  --t-brand-hover: #BC1F0C;
  --t-brand-soft: rgba(222, 41, 16, 0.12);
  --t-grad-1: #DE2910;
  --t-grad-2: #FFDE00;
  --t-banner-1: #1f0505;
  --t-banner-2: #3d0a0a;
  --t-banner-3: #DE2910;
  --t-accent: #FFDE00;
}

/* 教师节 */
[data-theme="teachers-day"] {
  --t-brand: #2F54EB;
  --t-brand-hover: #1D39C4;
  --t-brand-soft: rgba(47, 84, 235, 0.1);
  --t-grad-1: #2F54EB;
  --t-grad-2: #FAAD14;
  --t-banner-1: #050d1f;
  --t-banner-2: #0d1a3d;
  --t-banner-3: #2F54EB;
  --t-accent: #FAAD14;
}

/* 儿童节 */
[data-theme="childrens-day"] {
  --t-brand: #FF7875;
  --t-brand-hover: #E5615D;
  --t-brand-soft: rgba(255, 120, 117, 0.12);
  --t-grad-1: #FF7875;
  --t-grad-2: #FFD666;
  --t-banner-1: #1f0a0a;
  --t-banner-2: #3d1414;
  --t-banner-3: #b84545;
  --t-accent: #FFD666;
}

/* 双十一 */
[data-theme="double-eleven"] {
  --t-brand: #FF0036;
  --t-brand-hover: #E60030;
  --t-brand-soft: rgba(255, 0, 54, 0.12);
  --t-grad-1: #FF0036;
  --t-grad-2: #FFB800;
  --t-banner-1: #1f0008;
  --t-banner-2: #3d0010;
  --t-banner-3: #FF0036;
  --t-accent: #FFB800;
}

/* 双十二 */
[data-theme="double-twelve"] {
  --t-brand: #722ED1;
  --t-brand-hover: #531DB7;
  --t-brand-soft: rgba(114, 46, 209, 0.12);
  --t-grad-1: #722ED1;
  --t-grad-2: #FF7A45;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #722ED1;
  --t-accent: #FF7A45;
}

/* ============================================================
 * 第六类 · 现代化设计色（20 套）—— 2024-2026 新锐设计师热门色
 * ============================================================ */

/* Pantone 2026 */
[data-theme="pantone-2026"] {
  --t-brand: #5E30A8;
  --t-brand-hover: #4A2487;
  --t-brand-soft: rgba(94, 48, 168, 0.1);
  --t-grad-1: #5E30A8;
  --t-grad-2: #FF7E5F;
  --t-banner-1: #10081f;
  --t-banner-2: #1f143d;
  --t-banner-3: #5E30A8;
  --t-accent: #FF7E5F;
}

/* Cyberpunk Neon */
[data-theme="cyberpunk-neon"] {
  --t-brand: #FF00FF;
  --t-brand-hover: #E500E5;
  --t-brand-soft: rgba(255, 0, 255, 0.1);
  --t-grad-1: #FF00FF;
  --t-grad-2: #00FFFF;
  --t-banner-1: #0a0014;
  --t-banner-2: #140028;
  --t-banner-3: #FF00FF;
  --t-accent: #00FFFF;
}

/* Vaporwave */
[data-theme="vaporwave"] {
  --t-brand: #FF71CE;
  --t-brand-hover: #E55FBA;
  --t-brand-soft: rgba(255, 113, 206, 0.12);
  --t-grad-1: #FF71CE;
  --t-grad-2: #01CDFE;
  --t-banner-1: #1a0824;
  --t-banner-2: #2d0d3d;
  --t-banner-3: #FF71CE;
  --t-accent: #01CDFE;
}

/* Glassmorphism */
[data-theme="glassmorphism"] {
  --t-brand: #6366F1;
  --t-brand-hover: #4F46E5;
  --t-brand-soft: rgba(99, 102, 241, 0.1);
  --t-grad-1: #6366F1;
  --t-grad-2: #EC4899;
  --t-banner-1: #1e1b4b;
  --t-banner-2: #312e81;
  --t-banner-3: #6366F1;
  --t-accent: #EC4899;
}

/* Y2K */
[data-theme="y2k"] {
  --t-brand: #7B68EE;
  --t-brand-hover: #6552D3;
  --t-brand-soft: rgba(123, 104, 238, 0.12);
  --t-grad-1: #7B68EE;
  --t-grad-2: #FF6EC7;
  --t-banner-1: #14081f;
  --t-banner-2: #28143d;
  --t-banner-3: #7B68EE;
  --t-accent: #FF6EC7;
}

/* Miami Vice */
[data-theme="miami-vice"] {
  --t-brand: #FF10F0;
  --t-brand-hover: #E500D8;
  --t-brand-soft: rgba(255, 16, 240, 0.1);
  --t-grad-1: #FF10F0;
  --t-grad-2: #00D4FF;
  --t-banner-1: #1f001f;
  --t-banner-2: #3d0033;
  --t-banner-3: #FF10F0;
  --t-accent: #00D4FF;
}

/* Memphis Pop */
[data-theme="memphis-pop"] {
  --t-brand: #FF6B6B;
  --t-brand-hover: #E55B5B;
  --t-brand-soft: rgba(255, 107, 107, 0.12);
  --t-grad-1: #FF6B6B;
  --t-grad-2: #4ECDC4;
  --t-banner-1: #1f0a0a;
  --t-banner-2: #3d1414;
  --t-banner-3: #b84545;
  --t-accent: #4ECDC4;
}

/* Nordic Cool */
[data-theme="nordic-cool"] {
  --t-brand: #5E81AC;
  --t-brand-hover: #4C6E96;
  --t-brand-soft: rgba(94, 129, 172, 0.12);
  --t-grad-1: #5E81AC;
  --t-grad-2: #88C0D0;
  --t-banner-1: #0d1828;
  --t-banner-2: #1a2e44;
  --t-banner-3: #5E81AC;
  --t-accent: #88C0D0;
}

/* Cottagecore */
[data-theme="cottagecore"] {
  --t-brand: #B07D62;
  --t-brand-hover: #946A52;
  --t-brand-soft: rgba(176, 125, 98, 0.12);
  --t-grad-1: #B07D62;
  --t-grad-2: #D4B896;
  --t-banner-1: #1f1408;
  --t-banner-2: #3d2814;
  --t-banner-3: #876140;
  --t-accent: #B07D62;
}

/* Dark Academia */
[data-theme="dark-academia"] {
  --t-brand: #8B6F47;
  --t-brand-hover: #745C3A;
  --t-brand-soft: rgba(139, 111, 71, 0.15);
  --t-grad-1: #8B6F47;
  --t-grad-2: #C9A871;
  --t-banner-1: #1f1408;
  --t-banner-2: #3d2814;
  --t-banner-3: #876f30;
  --t-accent: #8B6F47;
}

/* Solar Punk */
[data-theme="solarpunk"] {
  --t-brand: #16A34A;
  --t-brand-hover: #15803D;
  --t-brand-soft: rgba(22, 163, 74, 0.1);
  --t-grad-1: #16A34A;
  --t-grad-2: #84CC16;
  --t-banner-1: #011408;
  --t-banner-2: #052810;
  --t-banner-3: #16A34A;
  --t-accent: #84CC16;
}

/* Gen Z Pop */
[data-theme="genz-pop"] {
  --t-brand: #FF006E;
  --t-brand-hover: #E50062;
  --t-brand-soft: rgba(255, 0, 110, 0.1);
  --t-grad-1: #FF006E;
  --t-grad-2: #3A86FF;
  --t-banner-1: #1f000d;
  --t-banner-2: #3d001a;
  --t-banner-3: #FF006E;
  --t-accent: #3A86FF;
}

/* Quiet Luxury */
[data-theme="quiet-luxury"] {
  --t-brand: #8B7355;
  --t-brand-hover: #745D43;
  --t-brand-soft: rgba(139, 115, 85, 0.12);
  --t-grad-1: #8B7355;
  --t-grad-2: #C9B89A;
  --t-banner-1: #1a140a;
  --t-banner-2: #2d2614;
  --t-banner-3: #876050;
  --t-accent: #8B7355;
}

/* Dopamine Decor */
[data-theme="dopamine-decor"] {
  --t-brand: #FF6F61;
  --t-brand-hover: #E55C4E;
  --t-brand-soft: rgba(255, 111, 97, 0.12);
  --t-grad-1: #FF6F61;
  --t-grad-2: #6B5B95;
  --t-banner-1: #1f0a0a;
  --t-banner-2: #3d1414;
  --t-banner-3: #b84545;
  --t-accent: #6B5B95;
}

/* Retro Tech */
[data-theme="retro-tech"] {
  --t-brand: #00FF41;
  --t-brand-hover: #00E03A;
  --t-brand-soft: rgba(0, 255, 65, 0.1);
  --t-grad-1: #00FF41;
  --t-grad-2: #FFB000;
  --t-banner-1: #00140a;
  --t-banner-2: #002814;
  --t-banner-3: #005E1A;
  --t-accent: #FFB000;
}

/* Futurism */
[data-theme="futurism"] {
  --t-brand: #00E5FF;
  --t-brand-hover: #00B8CC;
  --t-brand-soft: rgba(0, 229, 255, 0.1);
  --t-grad-1: #00E5FF;
  --t-grad-2: #7C4DFF;
  --t-banner-1: #001a1f;
  --t-banner-2: #003540;
  --t-banner-3: #00B8CC;
  --t-accent: #7C4DFF;
}

/* Neo Mint */
[data-theme="neo-mint"] {
  --t-brand: #00F5D4;
  --t-brand-hover: #00D4B5;
  --t-brand-soft: rgba(0, 245, 212, 0.1);
  --t-grad-1: #00F5D4;
  --t-grad-2: #F15BB5;
  --t-banner-1: #001a17;
  --t-banner-2: #003830;
  --t-banner-3: #00B89C;
  --t-accent: #F15BB5;
}

/* Barbie Pink */
[data-theme="barbie-pink"] {
  --t-brand: #FF69B4;
  --t-brand-hover: #E5559C;
  --t-brand-soft: rgba(255, 105, 180, 0.12);
  --t-grad-1: #FF69B4;
  --t-grad-2: #FFB6E1;
  --t-banner-1: #1f0a14;
  --t-banner-2: #3d1424;
  --t-banner-3: #a04a6a;
  --t-accent: #FF69B4;
}

/* Electric Lime */
[data-theme="electric-lime"] {
  --t-brand: #CCFF00;
  --t-brand-hover: #B0E000;
  --t-brand-soft: rgba(204, 255, 0, 0.15);
  --t-grad-1: #CCFF00;
  --t-grad-2: #00FF85;
  --t-banner-1: #0d1400;
  --t-banner-2: #1a2800;
  --t-banner-3: #5E7014;
  --t-accent: #00FF85;
}

/* Dark Mode Pro */
[data-theme="dark-mode-pro"] {
  --t-brand: #6366F1;
  --t-brand-hover: #4F46E5;
  --t-brand-soft: rgba(99, 102, 241, 0.15);
  --t-grad-1: #6366F1;
  --t-grad-2: #06B6D4;
  --t-banner-1: #020617;
  --t-banner-2: #0F172A;
  --t-banner-3: #1E293B;
  --t-accent: #06B6D4;
}

/* ============================================================
 * 主题应用规则 —— 把变量映射到 marketplace 页面元素
 * ============================================================ */

/* 默认继承自 :root 京东红 */
/* 这些类定义在 marketplace.html 的 .mp- 前缀下 */

.mp-page[data-theme] .mp-banner {
  background: linear-gradient(135deg, var(--t-banner-1) 0%, var(--t-banner-2) 50%, var(--t-banner-3) 100%);
}

.mp-page[data-theme] .mp-banner h1 span {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-grad-2) 50%, var(--t-brand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-page[data-theme] .mp-banner {
  border-bottom: 3px solid var(--t-brand);
}

.mp-page[data-theme] .mp-banner .mp-stats {
  border: 1px solid var(--t-brand-soft);
}

.mp-page[data-theme] .mp-banner .mp-stats strong {
  color: var(--t-brand);
}

.mp-page[data-theme] .mp-cat {
  background: var(--t-brand-soft);
  border-color: var(--t-brand-soft);
  color: var(--text-2);
}

.mp-page[data-theme] .mp-cat:hover {
  border-color: var(--t-brand);
  color: var(--t-brand);
}

.mp-page[data-theme] .mp-cat.active {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-grad-2));
  color: #fff;
  border-color: transparent;
}

.mp-page[data-theme] .mp-card {
  background: var(--surface);
  border-color: var(--border);
}

.mp-page[data-theme] .mp-card:hover {
  border-color: var(--t-brand);
  box-shadow: 0 16px 40px var(--t-brand-soft);
}

.mp-page[data-theme] .mp-card .mp-preview {
  background: linear-gradient(135deg, var(--t-brand), var(--t-grad-2));
}

.mp-page[data-theme] .mp-card .mp-cat-tag {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

.mp-page[data-theme] .mp-card .mp-hot {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-brand));
}

.mp-page[data-theme] .mp-card .mp-name .np-rating {
  color: var(--t-brand);
}

.mp-page[data-theme] .mp-card .mp-module {
  background: var(--t-brand-soft);
  color: var(--t-brand);
}

.mp-page[data-theme] .mp-card .mp-price {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-grad-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mp-page[data-theme] .mp-card .mp-actions .mp-preview-btn {
  background: #fff;
  color: var(--t-brand);
  border-color: var(--t-brand);
}

.mp-page[data-theme] .mp-card .mp-actions .mp-preview-btn:hover {
  background: var(--t-brand-soft);
}

.mp-page[data-theme] .mp-card .mp-actions .mp-reuse-btn {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-grad-2));
  color: #fff;
  border-color: transparent;
}

.mp-page[data-theme] .mp-card .mp-actions .mp-reuse-btn:hover {
  box-shadow: 0 6px 16px var(--t-brand-soft);
}

.mp-page[data-theme] .mp-modal {
  background: var(--t-banner-2);
}

.mp-page[data-theme] .mp-modal .mm-primary {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-grad-2));
  color: #fff;
  box-shadow: 0 6px 18px var(--t-brand-soft);
}

.mp-page[data-theme] .mp-modal h3 small {
  color: var(--t-brand);
}

/* 主题切换器 UI */
.theme-switcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
}

.theme-switcher-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--t-grad-1, #f59e0b), var(--t-grad-2, #ef4444));
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  transition: transform .3s, box-shadow .3s;
}

.theme-switcher-trigger:hover {
  transform: scale(1.1) rotate(15deg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.theme-switcher-panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 380px;
  max-height: 70vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: themePanelIn .35s cubic-bezier(0.16, 1, 0.3, 1);
}

.theme-switcher-panel.show {
  display: flex;
}

@keyframes themePanelIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.theme-switcher-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid #eee;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.theme-switcher-head h4 {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-switcher-head p {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
}

.theme-switcher-search {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
}

.theme-switcher-search input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 12px;
  background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  color: #0f172a;
}

.theme-switcher-search input:focus {
  outline: none;
  border-color: var(--t-brand);
  background: #fff;
}

.theme-switcher-cats {
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.theme-cat-pill {
  padding: 4px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  background: #f8fafc;
  color: #64748b;
  transition: all .2s;
  font-weight: 600;
}

.theme-cat-pill:hover {
  border-color: var(--t-brand);
  color: var(--t-brand);
}

.theme-cat-pill.active {
  background: linear-gradient(135deg, var(--t-grad-1), var(--t-grad-2));
  color: #fff;
  border-color: transparent;
}

.theme-switcher-grid {
  padding: 12px 14px;
  overflow-y: auto;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 380px;
}

.theme-swatch {
  position: relative;
  padding: 8px 6px 6px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  background: #fff;
}

.theme-swatch:hover {
  border-color: var(--t-brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.theme-swatch.active {
  border-color: var(--t-brand);
  background: var(--t-brand-soft);
  box-shadow: 0 0 0 2px var(--t-brand-soft);
}

.theme-swatch.active::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: var(--t-brand);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-swatch-bar {
  display: flex;
  height: 18px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 5px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.theme-swatch-bar > span {
  flex: 1;
}

.theme-swatch-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.theme-switcher-foot {
  padding: 10px 14px;
  border-top: 1px solid #eee;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #64748b;
}

.theme-switcher-foot a {
  color: var(--t-brand);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.theme-switcher-foot a:hover {
  text-decoration: underline;
}

/* 主题徽章 */
.theme-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--t-brand-soft);
  color: var(--t-brand);
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  cursor: pointer;
  transition: all .2s;
}

.theme-badge:hover {
  background: var(--t-brand);
  color: #fff;
}

.theme-badge i {
  font-size: 9px;
}

@media (max-width: 768px) {
  .theme-switcher {
    right: 12px;
    bottom: 12px;
  }
  .theme-switcher-trigger {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .theme-switcher-panel {
    width: calc(100vw - 24px);
    right: 0;
    bottom: 56px;
  }
  .theme-switcher-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 主题对比模式（自动深色增强） */
.mp-page[data-theme="dark-mode-pro"] .mp-card,
.mp-page[data-theme="dark-mode-pro"] .mp-modal-box {
  background: #1E293B;
  border-color: rgba(99, 102, 241, 0.2);
  color: #F1F5F9;
}

.mp-page[data-theme="dark-mode-pro"] .mp-card .mp-name,
.mp-page[data-theme="dark-mode-pro"] .mp-card .mp-price,
.mp-page[data-theme="dark-mode-pro"] .mp-modal h3 {
  color: #F1F5F9;
}

.mp-page[data-theme="dark-mode-pro"] .mp-card .mp-desc,
.mp-page[data-theme="dark-mode-pro"] .mp-card .mp-stats {
  color: #94A3B8;
}

.mp-page[data-theme="dark-mode-pro"] body {
  background: #0F172A;
}

.mp-page[data-theme="dark-mode-pro"] .mp-toolbar,
.mp-page[data-theme="dark-mode-pro"] .dd-breadcrumb {
  background: #1E293B;
  border-color: rgba(99, 102, 241, 0.2);
}

/* ============================================================
 * 工具类 - 主题无关的渐入动画
 * ============================================================ */
@keyframes themeSwatchIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.theme-swatch {
  animation: themeSwatchIn .3s ease both;
}

.theme-swatch:nth-child(3n+1) { animation-delay: .02s; }
.theme-swatch:nth-child(3n+2) { animation-delay: .04s; }
.theme-swatch:nth-child(3n+3) { animation-delay: .06s; }