/*
 * TPOAD Review 主题（2026-09-25 老板：「整个系统多几个主题，清爽配色的一些，圣诞主题及中国新年主题」）。
 * 首页、后台、客户审阅页共用。主题清单的唯一真相在 apps/api/src/lib/themes.ts；这里只放每个主题的颜色和节日装饰。
 *
 * 规矩：
 *   - 只改一组变量：--red（强调色）/ --red-deep / --accent-rgb / --amber（渐变搭档）/ --paper（底色）。
 *   - 不改：--danger（删除、失败、过期、必改…）、--brand（TPOAD 标志）、画在作品上的标注（导出也是红的）。
 *   - 主按钮默认白字压强调色：每个主题的 --red 对白字的对比度 ≥ 4.5（run-theme-e2e 量）；
 *     晴空例外，主按钮改浅底细边深蓝字（--primary-*，老板 9-26「晴空主题不用实心蓝」）。
 *   - 节日装饰只有淡底纹和标志旁一个小挂件（theme-switch.js 插的 .theme-orn），不挡内容；
 *     挂件循环微动，系统打开「减少动态效果」时全停。
 */

/* ---------- 清爽 ---------- */
html[data-theme="mint"] {
  --red: #0b7a5e; --red-deep: #08604a; --accent-rgb: 11, 122, 94; --amber: #2bb391; --paper: #f3f8f5;
  --stage: #e5eee9; /* 客户页画布：比底色深一档、带一点主题色（默认主题是暖灰 #efece6） */
}
html[data-theme="sky"] {
  --red: #1f63d6; --red-deep: #184fae; --accent-rgb: 31, 99, 214; --amber: #4f9bf0; --paper: #f4f7fc; --stage: #e5ebf4;
  /* 老板 9-26：晴空主题不用实心蓝——主按钮浅蓝底、细蓝边、深蓝字 */
  --primary-bg: rgba(31, 99, 214, .10); --primary-bg-hover: rgba(31, 99, 214, .17);
  --primary-fg: #184fae; --primary-line: rgba(31, 99, 214, .42);
}
html[data-theme="lilac"] {
  --red: #6a4fd1; --red-deep: #553cb2; --accent-rgb: 106, 79, 209; --amber: #a58df0; --paper: #f7f5fc; --stage: #eae7f4;
}

/* ---------- 节日 ---------- */
html[data-theme="xmas"] {
  --red: #1e6b45; --red-deep: #155234; --accent-rgb: 30, 107, 69; --amber: #c8102e; --paper: #fbf8f1; --stage: #e9ede6;
}
/* 细雪点：两层错开的淡点，一层松绿一层红，固定不随滚动 */
html[data-theme="xmas"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(30, 107, 69, .075) 1.3px, transparent 1.7px),
    radial-gradient(circle, rgba(200, 16, 46, .05) 1.1px, transparent 1.5px);
  background-size: 34px 34px, 58px 58px;
  background-position: 0 0, 17px 29px;
}

html[data-theme="cny"] {
  --red: #c8102e; --red-deep: #9e0c24; --accent-rgb: 200, 16, 46; --amber: #d4a017; --paper: #fff8f1; --stage: #f4e8df;
}
/* 淡祥云：金色细线，很淡 */
html[data-theme="cny"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='96' viewBox='0 0 120 96'%3E%3Cg fill='none' stroke='%23d4a017' stroke-opacity='.16' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 40c0-7 6-12 12-12s11 5 11 11c0 4-3 7-7 7s-6-3-6-6 2-4 4-4'/%3E%3Cpath d='M37 39c2-6 8-10 14-9 7 1 11 7 10 13'/%3E%3Cpath d='M74 80c0-6 5-10 10-10s9 4 9 9c0 3-2 6-6 6-3 0-5-2-5-5s2-3 3-3'/%3E%3Cpath d='M93 79c2-5 7-8 12-7 5 1 9 5 8 11'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 96px;
}

/* ---------- 标志旁的小挂件（theme-switch.js 插入；只有节日主题显示） ---------- */
.theme-orn { display: none; width: 18px; height: 22px; pointer-events: none; background: no-repeat center / contain; }
.brand { position: relative; }
.brand > .theme-orn { position: absolute; right: -20px; top: -9px; }
header > .theme-orn { position: relative; flex: none; margin-left: -14px; margin-right: -4px; top: -10px; }
html[data-theme="xmas"] .theme-orn {
  display: block;
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e6b45' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17l17.4-10'/%3E%3Cpath d='M9.5 3.5 12 6l2.5-2.5M9.5 20.5 12 18l2.5 2.5M3.6 10.2l3.4.8-1 3.4M20.4 13.8l-3.4-.8 1-3.4M3.6 13.8l3.4-.8-1-3.4M20.4 10.2l-3.4.8 1 3.4'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23c8102e' stroke='none'/%3E%3C/svg%3E");
  animation: orn-snow 9s ease-in-out infinite;
}
html[data-theme="cny"] .theme-orn {
  display: block;
  width: 16px; height: 24px;
  transform-origin: 50% 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 0v3' stroke='%23d4a017' stroke-width='1.2'/%3E%3Crect x='4.5' y='3' width='7' height='2' rx='.6' fill='%23d4a017'/%3E%3Cellipse cx='8' cy='11' rx='6.5' ry='6' fill='%23c8102e'/%3E%3Cpath d='M8 5.2v11.6M4.2 6.6c-1 2.6-1 6.2 0 8.8M11.8 6.6c1 2.6 1 6.2 0 8.8' stroke='%23e8b33a' stroke-opacity='.7' stroke-width='.8' fill='none'/%3E%3Crect x='4.5' y='16.6' width='7' height='2' rx='.6' fill='%23d4a017'/%3E%3Cpath d='M8 18.6V24M6.6 19.8v3.4M9.4 19.8v3.4' stroke='%23d4a017' stroke-width='.9'/%3E%3C/svg%3E");
  animation: orn-sway 3.2s ease-in-out infinite;
}
@keyframes orn-snow { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(60deg) translateY(1.5px); } }
@keyframes orn-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) {
  .theme-orn { animation: none !important; }
}

/* 手机上客户审阅页的页头已经满了（标志、项目名、怎么用、称呼、批准 / 复核提示、语言）：主题按钮收起，全站默认照常生效。
   首页、后台手机上照常有，只剩色块（调色盘图标跟语言那边一样在窄屏收起）。 */
@media (max-width: 480px) {
  [data-theme-switch][data-phone-hide] { display: none; }
}

/* ---------- 切换菜单（外观跟语言切换一样，这里只补色块和分组） ---------- */
.theme-sw__dot { display: inline-block; width: 14px; height: 14px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(17, 16, 14, .12); }
.theme-sw__group { padding: 6px 10px 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--muted); }
.theme-sw .lang__item { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.theme-sw .lang__item[aria-current="true"]::after { margin-left: auto; }
.theme-sw .menu__sep { height: 1px; margin: 4px 6px; background: var(--line); }
.theme-sw .lang__btn .theme-sw__dot { width: 12px; height: 12px; }
.theme-sw .lang__item[aria-current="true"] { font-weight: 600; }
.theme-sw__act { color: var(--ink-2); }
.theme-sw__site { color: var(--red-deep); }
/* 节日自动换装开关（只有管理员看得到）：标题＋两行小字说明（圣诞一行、春节一行）；右边一个小开关 */
.theme-sw .theme-sw__festive { align-items: flex-start; white-space: normal; }
.theme-sw__txt { display: flex; flex-direction: column; gap: 1px; max-width: 220px; }
.theme-sw__txt small { font-size: 11.5px; line-height: 1.35; color: var(--muted); text-wrap: balance; }
.theme-sw .theme-sw__festive::after {
  content: ""; flex: none; width: 24px; height: 14px; margin: 2px 0 0 auto; border-radius: 7px;
  background: radial-gradient(circle at 7px 7px, #fff 4.5px, transparent 5px), rgba(17, 16, 14, .2);
}
.theme-sw [aria-busy="true"] { opacity: .55; cursor: progress; }
.theme-sw .theme-sw__festive[aria-pressed="true"]::after { background: radial-gradient(circle at 17px 7px, #fff 4.5px, transparent 5px), var(--red); }
.theme-sw__ico { animation: theme-ico 5s ease-in-out infinite; transform-origin: center; }
@keyframes theme-ico { 0%, 70%, 100% { transform: rotate(0deg); } 80% { transform: rotate(-14deg); } 90% { transform: rotate(10deg); } }
@media (prefers-reduced-motion: reduce) { .theme-sw__ico { animation: none; } }