/* ==========================================================
   主题切换层 —— 浅色 / 深色 双主题
   ----------------------------------------------------------
   架构：style.css 的 :root 是「深色基线」，本文件只负责
   在 html[data-theme="light"] 下覆盖令牌 + 修正深色专属装饰。

   为什么这么做：
   1. 深色版的值已经全部量化验证过（对比度 0 问题），不动它最安全。
   2. 浅色只需覆盖 ~40 个令牌 + 十几条装饰规则，比维护两份
      2000 行 CSS 可靠得多，也不会出现两套样式互相漂移。
   3. 默认浅色由 <html data-theme="light"> 决定，且在没有 JS
      时也能生效（首屏不闪）。
   ========================================================== */

/* ----------------------------------------------------------
   1. 浅色令牌
   ---------------------------------------------------------- */
html[data-theme="light"] {
  /* 文字：4 级，深→浅（浅底上必须比直觉更深，才能过 4.5:1） */
  --ink: #152b33;
  --ink-2: #33474e;
  --ink-3: #56686f;
  --ink-4: #6d7f85;
  --ink-invert: #ffffff;

  /* 表面：3 级。浅色最怕「底白卡也白」糊成一片，
     所以底色带明确蓝调（不是中性灰），卡片纯白，色相差拉开层次。 */
  --bg: #e9eff7;
  --surface-1: #ffffff;
  --surface-2: #f5f8fc;
  --surface-3: #e3ebf5;
  --surface-glass: rgba(255, 255, 255, 0.85);

  /* 描边：靠不透明度区分 */
  --line-1: rgba(21, 43, 51, 0.07);
  --line-2: rgba(21, 43, 51, 0.11);
  --line-3: rgba(21, 43, 51, 0.18);

  /* 品牌：同一套蓝，浅色下需要更深才够对比度 */
  --brand: #2563eb;
  --brand-light: #1d4ed8;
  --brand-deep: #1e3a8a;
  --cyan: #0e7490;
  --brand-soft: rgba(37, 99, 235, 0.09);
  --brand-glow: rgba(37, 99, 235, 0.2);
  --mint: #4d9e2f;
  --teal: #0f766e;

  /* 语义色：浅底上要收深（4.5:1 需要比直觉更深） */
  --ok: #047857;
  --warn: #b45309;
  --danger: #dc2626;

  /* 渐变 */
  --grad-brand: linear-gradient(135deg, #2563eb 0%, #0e7490 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(14, 116, 144, 0.07));
  --grad-surface: linear-gradient(168deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 52%);
  --grad-text: linear-gradient(100deg, #152b33 0%, #2563eb 58%, #0e7490 100%);

  /* 阴影：浅色用「灰蓝扩散」，不能用纯黑 */
  --shadow-xs: 0 1px 2px rgba(21, 43, 51, 0.06);
  --shadow-sm: 0 2px 10px rgba(21, 43, 51, 0.07);
  --shadow-md: 0 10px 28px rgba(21, 43, 51, 0.09);
  --shadow-lg: 0 22px 56px rgba(21, 43, 51, 0.12);
  --shadow-brand: 0 10px 30px rgba(37, 99, 235, 0.22);
  --ring-brand: 0 0 0 1px rgba(37, 99, 235, 0.3);

  color-scheme: light;
}

/* ----------------------------------------------------------
   2. 页面底色：浅色下用明确的蓝青冷光，不是一片中性灰
   ---------------------------------------------------------- */
html[data-theme="light"] body {
  background-color: var(--bg);
  background-image:
    radial-gradient(58% 44% at 6% -6%, rgba(37, 99, 235, 0.16), transparent 62%),
    radial-gradient(50% 38% at 96% 0%, rgba(13, 148, 136, 0.13), transparent 60%),
    radial-gradient(70% 50% at 50% 104%, rgba(79, 70, 229, 0.11), transparent 66%),
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 56px 56px, 56px 56px;
  background-attachment: fixed;
}

/* ----------------------------------------------------------
   3. 品牌图标：浅色下不用发光，改实心深蓝
   ---------------------------------------------------------- */
html[data-theme="light"] .brand-icon {
  background: linear-gradient(145deg, #3b82f6, #2563eb 52%, #0e7490);
  color: #fff;
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* ----------------------------------------------------------
   4. 顶部导航：胶囊底改用深色微透明
   ---------------------------------------------------------- */
html[data-theme="light"] .navigation {
  background: rgba(21, 43, 51, 0.045);
  border-color: var(--line-2);
}
html[data-theme="light"] .nav-item.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(21, 43, 51, 0.1), inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

/* ----------------------------------------------------------
   5. Hero：浅色下用淡蓝渐变卡，保留轮廓光
   ---------------------------------------------------------- */
html[data-theme="light"] .hero {
  background: radial-gradient(88% 120% at 88% 6%, rgba(14, 116, 144, 0.16), transparent 58%),
    radial-gradient(76% 108% at 10% 96%, rgba(37, 99, 235, 0.18), transparent 62%),
    linear-gradient(132deg, #eef5fb 0%, #e4eefa 46%, #dbe9f8 100%);
  box-shadow: var(--shadow-md), 0 0 60px rgba(37, 99, 235, 0.06);
}
html[data-theme="light"] .hero::before {
  background: linear-gradient(138deg, rgba(37, 99, 235, 0.34), rgba(14, 116, 144, 0.14) 38%, transparent 66%);
}
html[data-theme="light"] .hero-label {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.22);
}
html[data-theme="light"] .hero-pills span {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(37, 99, 235, 0.16);
  color: #33474e;
}
/* 硬编码的旧浅色值，在浅底上会消失，单独收深 */
html[data-theme="light"] .hero-index {
  color: #56686f;
}
html[data-theme="light"] .hero-label {
  color: #115e59;
}
html[data-theme="light"] .spark {
  color: #4d7c0f;
}

/* ----------------------------------------------------------
   6. 卡片：白底 + 极淡投影，靠描边而非发光区分层级
   ---------------------------------------------------------- */
html[data-theme="light"] .product-card {
  background: #fff;
  border-color: rgba(21, 43, 51, 0.09);
  box-shadow: 0 1px 2px rgba(21, 43, 51, 0.05), 0 3px 10px rgba(21, 43, 51, 0.045);
}
html[data-theme="light"] .product-card::before {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.07), transparent 68%);
}
html[data-theme="light"] .product-card:hover {
  border-color: rgba(37, 99, 235, 0.32);
  box-shadow: 0 2px 6px rgba(21, 43, 51, 0.07), 0 12px 28px rgba(37, 99, 235, 0.13);
}

html[data-theme="light"] .checkout-card {
  background: linear-gradient(178deg, rgba(37, 99, 235, 0.05), rgba(37, 99, 235, 0) 38%), var(--surface-1);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(37, 99, 235, 0.06);
}

/* 商品图标：浅色下用实色浅底 + 深字，不用半透明叠加 */
html[data-theme="light"] .product-icon.ai {
  background: linear-gradient(150deg, #e0f7fa, #eafafc);
  color: #0e7490;
}
html[data-theme="light"] .product-icon.music {
  background: linear-gradient(150deg, #f0fbe0, #f5fce8);
  color: #4d7c0f;
}
html[data-theme="light"] .product-icon.video {
  background: linear-gradient(150deg, #feeaea, #fef2f2);
  color: #b91c1c;
}
html[data-theme="light"] .product-icon.game {
  background: linear-gradient(150deg, #efeafd, #f5f1fe);
  color: #6d28d9;
}
html[data-theme="light"] .product-icon.design {
  background: linear-gradient(150deg, #e8f0fe, #f0f5fe);
  color: #1d4ed8;
}
html[data-theme="light"] .product-icon.cloud {
  background: linear-gradient(150deg, #fef6e0, #fefbf0);
  color: #b45309;
}
html[data-theme="light"] .product-icon {
  border: 1px solid rgba(21, 43, 51, 0.05);
}

/* ----------------------------------------------------------
   7. 按钮：主按钮在浅色下用更深的蓝，保证白字 4.5:1
   ---------------------------------------------------------- */
html[data-theme="light"] .primary-button {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 58%, #0e7490 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
html[data-theme="light"] .primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 58%, #0f766e 100%);
  filter: none;
}

html[data-theme="light"] .support-fab {
  background: linear-gradient(135deg, #2563eb, #1d4ed8 62%, #0e7490);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}

/* 分类激活态 */
html[data-theme="light"] .category.active {
  background: var(--brand-soft);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.26);
}

/* 次要按钮 */
html[data-theme="light"] .outline-button {
  color: var(--ink-2);
  border-color: var(--line-3);
}
html[data-theme="light"] .outline-button:hover {
  border-color: rgba(37, 99, 235, 0.4);
  background: var(--surface-3);
  color: var(--ink);
}

/* ----------------------------------------------------------
   8. 表单：浅色下输入框用白底 + 内描边（不用灰底）
   ---------------------------------------------------------- */
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select {
  background: #fff;
  border-color: var(--line-3);
  color: var(--ink);
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus,
html[data-theme="light"] .field select:focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

/* ----------------------------------------------------------
   9. 其余深色专属装饰：光晕/玻璃/深色投影逐条修正
   ---------------------------------------------------------- */
html[data-theme="light"] .main::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.08),
    rgba(14, 116, 144, 0.035) 46%, transparent 74%);
}
html[data-theme="light"] .footer::before {
  background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.11),
    rgba(14, 116, 144, 0.04) 46%, transparent 74%);
}

html[data-theme="light"] .order-result {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 42%),
    var(--surface-1);
}

html[data-theme="light"] .toast {
  background: #152b33;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 34px rgba(21, 43, 51, 0.24);
}

/* 商品卡内的图片/渐变占位在浅色下需要更淡的底 */
html[data-theme="light"] .product-card .price,
html[data-theme="light"] .product-price {
  color: var(--ink);
}

/* 斑马纹 & hover（前台表格/列表，如有） */
html[data-theme="light"] tbody tr:nth-child(even) {
  background: rgba(21, 43, 51, 0.018);
}
html[data-theme="light"] tbody tr:hover {
  background: rgba(37, 99, 235, 0.045);
}

/* ----------------------------------------------------------
   10. 主题切换按钮（放在「简单三步」旁）
   ---------------------------------------------------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.theme-toggle:hover {
  border-color: var(--line-3);
  background: var(--surface-3);
  color: var(--ink);
}
.theme-toggle:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.theme-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
/* 图标切换：浅色显示月亮（点击转深色），深色显示太阳 */
.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  display: none;
}
html[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}
html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
/* 深浅色按钮各自的强调色 */
html[data-theme="light"] .theme-toggle {
  background: #fff;
  border-color: rgba(21, 43, 51, 0.12);
  box-shadow: 0 1px 3px rgba(21, 43, 51, 0.06);
}
html[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(37, 99, 235, 0.32);
  color: #1d4ed8;
  background: #fff;
}

/* 页头右侧工具区在窄屏收起文字，只留图标 */
@media (max-width: 640px) {
  .theme-toggle .theme-toggle-text {
    display: none;
  }
  .theme-toggle {
    padding: 0 9px;
  }
}

/* ==========================================================
   11. 登录页（内联样式里的深色装饰）
   ----------------------------------------------------------
   login.html 的样式写在页面 <style> 里，优先级高于 theme.css，
   所以这里必须用同权重或更高的选择器 + 放到本文件末尾。
   ========================================================== */

/* 登录页的 body 是居中卡片布局，光斑尺寸和首页不同，单独给一套 */
html[data-theme="light"] body.page-login {
  background-image: radial-gradient(880px 460px at 84% -6%, rgba(14, 116, 144, 0.1), transparent 62%),
    radial-gradient(760px 430px at 4% 104%, rgba(37, 99, 235, 0.11), transparent 60%),
    radial-gradient(560px 380px at 50% 50%, rgba(29, 78, 216, 0.05), transparent 70%),
    linear-gradient(rgba(21, 43, 51, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 43, 51, 0.022) 1px, transparent 1px);
}

/* 登录卡：浅色下白底 + 柔和投影 */
html[data-theme="light"] .login-shell {
  background: #fff;
  border-color: var(--line-2);
  box-shadow: 0 20px 56px rgba(21, 43, 51, 0.12), 0 0 0 1px rgba(37, 99, 235, 0.05);
}

/* 左侧品牌面板：深蓝 → 浅蓝渐变，文字转深 */
html[data-theme="light"] .login-aside {
  background: radial-gradient(120% 92% at 94% 4%, rgba(14, 116, 144, 0.14), transparent 58%),
    radial-gradient(96% 84% at 2% 100%, rgba(37, 99, 235, 0.16), transparent 62%),
    linear-gradient(150deg, #eaf3fb 0%, #e2edfa 48%, #d8e8f8 100%);
  color: var(--ink);
}
html[data-theme="light"] .login-aside::after {
  background: linear-gradient(180deg, transparent 0%, rgba(37, 99, 235, 0.28) 26%,
    rgba(14, 116, 144, 0.2) 64%, transparent 100%);
}
html[data-theme="light"] .login-aside .brand strong {
  color: var(--ink);
}
html[data-theme="light"] .login-aside .brand strong .brand-en {
  color: #56686f;
}
html[data-theme="light"] .aside-body h1 {
  color: var(--ink);
}
html[data-theme="light"] .aside-body p {
  color: #3d5259;
}
html[data-theme="light"] .aside-list li {
  color: #33474e;
}
html[data-theme="light"] .aside-list i {
  background: rgba(14, 116, 144, 0.12);
  border-color: rgba(14, 116, 144, 0.3);
  color: #0f766e;
  box-shadow: none;
}
html[data-theme="light"] .aside-foot {
  color: #56686f;
}
html[data-theme="light"] .aside-art {
  opacity: 0.42;
}

/* 右侧表单 */
html[data-theme="light"] .login-main {
  background: #fff;
}
html[data-theme="light"] .login-main h2 {
  color: var(--ink);
}
html[data-theme="light"] .login-sub,
html[data-theme="light"] .login-meta {
  color: var(--ink-3);
}
html[data-theme="light"] .login-field label {
  color: var(--ink-2);
}
html[data-theme="light"] .input-wrap input {
  background: #fbfcfd;
  border-color: var(--line-3);
  color: var(--ink);
}
html[data-theme="light"] .input-wrap input::placeholder {
  color: var(--ink-4);
}
html[data-theme="light"] .input-wrap input:focus {
  background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.13);
}
html[data-theme="light"] .input-wrap input:disabled {
  background: var(--surface-3);
  color: var(--ink-3);
}
html[data-theme="light"] .eye-toggle {
  color: var(--ink-3);
}
html[data-theme="light"] .eye-toggle:hover {
  background: rgba(21, 43, 51, 0.06);
  color: var(--ink);
}
html[data-theme="light"] .remember {
  color: var(--ink-2);
}
html[data-theme="light"] .hint-link {
  color: var(--brand);
}
html[data-theme="light"] .hint-link:hover {
  color: var(--brand-deep);
}
html[data-theme="light"] .login-meta a {
  color: var(--brand);
}
html[data-theme="light"] .login-meta a:hover {
  color: var(--brand-deep);
}
html[data-theme="light"] .login-error {
  color: #b91c1c;
  background: #fdf2f2;
  border-color: #f3d3d3;
}
html[data-theme="light"] .attempts-warn {
  color: #92400e;
  background: #fffbeb;
  border-color: #f5e3bf;
}
html[data-theme="light"] .login-submit span {
  color: #a5f3fc;
}
html[data-theme="light"] .login-meta {
  border-top-color: var(--line-2);
}

/* ==========================================================
   12. 后台（内联样式里的深色装饰）
   ========================================================== */
html[data-theme="light"] .admin-header {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom-color: var(--line-2);
}

/* 统计卡：白底 + 淡品牌光，不用白色叠加 */
html[data-theme="light"] .stat {
  background: radial-gradient(120% 130% at 0% 0%, rgba(37, 99, 235, 0.07), transparent 58%),
    linear-gradient(168deg, #ffffff, #fbfcfe 62%);
  border-color: var(--line-2);
  box-shadow: 0 2px 10px rgba(21, 43, 51, 0.06), inset 0 1px 0 #fff;
}
html[data-theme="light"] .stat::before {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.09), transparent 68%);
}
html[data-theme="light"] .stat::after {
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.26) 30%,
    rgba(14, 116, 144, 0.18) 70%, transparent);
}
html[data-theme="light"] .stat b {
  color: var(--ink);
}

/* 面板 */
html[data-theme="light"] .panel {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.028), rgba(37, 99, 235, 0) 26%), #fff;
  border-color: var(--line-2);
  box-shadow: 0 4px 18px rgba(21, 43, 51, 0.06);
}
html[data-theme="light"] .panel-head {
  border-bottom-color: var(--line-2);
}

/* 表头 & 斑马纹：深色用白色叠加，浅色要用深色叠加 */
html[data-theme="light"] th {
  background: rgba(21, 43, 51, 0.032);
  border-bottom-color: var(--line-2);
}
html[data-theme="light"] td {
  border-bottom-color: var(--line-1);
}
html[data-theme="light"] tbody tr:nth-child(even) {
  background: rgba(21, 43, 51, 0.014);
}
html[data-theme="light"] tbody tr:hover {
  background: rgba(37, 99, 235, 0.045);
}
html[data-theme="light"] .filter-btn.active {
  background: var(--brand-soft);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.32);
}
html[data-theme="light"] .filter-btn:hover:not(.active) {
  background: var(--surface-3);
}

/* 品牌预览框等内嵌块 */
html[data-theme="light"] .site-preview {
  background: linear-gradient(180deg, var(--surface-3), #fff);
}
html[data-theme="light"] .admin-tab.active {
  color: var(--ink);
}

/* 提示条 */
html[data-theme="light"] .pay-warn,
html[data-theme="light"] .pay-tip {
  background: #fffbeb;
  border-color: #f5e3bf;
  color: #92400e;
}
html[data-theme="light"] .pay-warn b {
  color: #78350f;
}

/* 后台 body：64px 网格 + 更淡的冷光 */
html[data-theme="light"] body.page-admin {
  background-image: radial-gradient(64% 40% at 12% -6%, rgba(37, 99, 235, 0.08), transparent 64%),
    radial-gradient(52% 34% at 92% 0%, rgba(14, 116, 144, 0.05), transparent 62%),
    radial-gradient(72% 42% at 50% 106%, rgba(29, 78, 216, 0.05), transparent 70%),
    linear-gradient(rgba(21, 43, 51, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 43, 51, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 64px 64px, 64px 64px;
}