/* ==========================================================================
   前台展示风格（主题）—— 由后台「站点设置 → 前台展示风格」切换
   --------------------------------------------------------------------------
   实现方式：只覆盖设计令牌（CSS 变量）+ 少量定向微调，不改变任何 DOM 结构
   与交互逻辑，因此切换风格不会影响内容、表单与响应式行为。
     1. nebula   星云深空（默认，令牌即 style.css 的 :root 默认值）
     2. aurora   极光幻境
     3. graphite 石墨商务
     4. paper    素白简约
   本文件由站点自行维护，不参与自动化页面重建。
   ========================================================================== */

/* ---------- 新增令牌的默认值（星云深空；其余风格按需覆盖） ---------- */
:root {
  /* 深底上的浅色叠加：卡片渐变、网格线、分隔等 */
  --tint-weak:      rgba(255, 255, 255, .018);
  --tint:           rgba(255, 255, 255, .045);
  --tint-strong:    rgba(255, 255, 255, .08);
  --tint-line:      rgba(255, 255, 255, .2);

  /* 导航与遮罩 */
  --nav-bg:         rgba(6, 9, 18, .78);
  --nav-bg-solid:   rgba(6, 9, 18, .97);
  --overlay:        rgba(5, 7, 14, .35);
  --overlay-strong: rgba(5, 7, 14, .58);

  --footer-bg:      #04060c;
  --on-grad:        #05070e;   /* 渐变底之上的文字色 */
}

/* ==========================================================================
   2) 极光幻境 —— 青绿↔紫的极光渐层，光晕更盛、圆角更柔
   ========================================================================== */
html[data-style="aurora"] {
  --bg:          #030b14;
  --bg-alt:      #05141f;
  --surface:     rgba(255, 255, 255, .05);
  --surface-2:   rgba(255, 255, 255, .075);
  --line:        rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .2);

  --text:  #eafaf7;
  --text-2:#b6d6d4;
  --muted: #7fa4a6;

  --cyan:   #2ee6c5;
  --blue:   #4f8cf8;
  --indigo: #6d5cf7;
  --violet: #b06cff;
  --teal:   #34e0b0;

  --grad:      linear-gradient(112deg, #2ee6c5 0%, #4f8cf8 46%, #b06cff 100%);
  --grad-soft: linear-gradient(140deg, rgba(46, 230, 197, .18), rgba(176, 108, 255, .16));

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 32px;

  --shadow: 0 26px 64px -26px rgba(0, 0, 0, .8);
  --glow-cyan:   0 0 0 1px rgba(46, 230, 197, .4), 0 14px 44px -12px rgba(46, 230, 197, .5);
  --glow-violet: 0 0 0 1px rgba(176, 108, 255, .36), 0 16px 48px -14px rgba(176, 108, 255, .46);

  --tint-weak:   rgba(255, 255, 255, .022);
  --tint:        rgba(255, 255, 255, .055);
  --tint-strong: rgba(255, 255, 255, .095);
  --tint-line:   rgba(255, 255, 255, .22);

  --nav-bg:         rgba(3, 11, 20, .74);
  --nav-bg-solid:   rgba(3, 11, 20, .97);
  --overlay:        rgba(3, 11, 20, .35);
  --overlay-strong: rgba(3, 11, 20, .58);

  --footer-bg: #020910;
  --on-grad:   #04211c;
}

/* ==========================================================================
   3) 石墨商务 —— 中性石墨灰 + 单一电蓝，方正硬朗、弱光效
   ========================================================================== */
html[data-style="graphite"] {
  --bg:          #101114;
  --bg-alt:      #16181c;
  --surface:     rgba(255, 255, 255, .04);
  --surface-2:   rgba(255, 255, 255, .06);
  --line:        rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  --text:  #f1f2f4;
  --text-2:#c2c6cd;
  --muted: #8b9099;

  --cyan:   #8ab4ff;
  --blue:   #5b8def;
  --indigo: #4f7ce8;
  --violet: #7a8cff;
  --teal:   #7fd3c3;
  --amber:  #e0a94b;
  --pink:   #d98bb8;

  --grad:      linear-gradient(112deg, #5b8def 0%, #7a8cff 100%);
  --grad-soft: linear-gradient(140deg, rgba(91, 141, 239, .14), rgba(122, 140, 255, .1));

  --r-sm: 6px;
  --r:    8px;
  --r-lg: 10px;
  --r-xl: 12px;

  --shadow: 0 18px 40px -24px rgba(0, 0, 0, .9);
  --glow-cyan:   0 0 0 1px rgba(138, 180, 255, .3), 0 10px 30px -14px rgba(91, 141, 239, .4);
  --glow-violet: 0 0 0 1px rgba(122, 140, 255, .28), 0 12px 34px -16px rgba(122, 140, 255, .36);

  --tint-weak:   rgba(255, 255, 255, .02);
  --tint:        rgba(255, 255, 255, .04);
  --tint-strong: rgba(255, 255, 255, .07);
  --tint-line:   rgba(255, 255, 255, .18);

  --nav-bg:         rgba(16, 17, 20, .82);
  --nav-bg-solid:   rgba(16, 17, 20, .98);
  --overlay:        rgba(16, 17, 20, .4);
  --overlay-strong: rgba(16, 17, 20, .62);

  --footer-bg: #0c0d10;
  --on-grad:   #ffffff;
}

/* ==========================================================================
   4) 素白简约 —— 浅色留白、深色文字、白色卡片
   ========================================================================== */
html[data-style="paper"] {
  --bg:          #f6f7fb;
  --bg-alt:      #eef1f7;
  --surface:     #ffffff;
  --surface-2:   #ffffff;
  --line:        rgba(15, 23, 42, .1);
  --line-strong: rgba(15, 23, 42, .2);

  --text:  #111827;
  --text-2:#39425a;
  --muted: #6b7280;

  --cyan:   #0891b2;
  --blue:   #2563eb;
  --indigo: #4f46e5;
  --violet: #7c3aed;
  --teal:   #0d9488;
  --amber:  #b45309;
  --pink:   #db2777;

  --grad:      linear-gradient(112deg, #0ea5e9 0%, #4f46e5 58%, #7c3aed 100%);
  --grad-soft: linear-gradient(140deg, rgba(14, 165, 233, .1), rgba(124, 58, 237, .08));

  --shadow: 0 20px 44px -28px rgba(15, 23, 42, .38);
  --glow-cyan:   0 0 0 1px rgba(14, 165, 233, .25), 0 12px 30px -18px rgba(14, 165, 233, .35);
  --glow-violet: 0 0 0 1px rgba(124, 58, 237, .22), 0 14px 34px -20px rgba(124, 58, 237, .3);

  --tint-weak:   rgba(15, 23, 42, .018);
  --tint:        rgba(15, 23, 42, .035);
  --tint-strong: rgba(15, 23, 42, .06);
  --tint-line:   rgba(15, 23, 42, .16);

  --nav-bg:         rgba(255, 255, 255, .82);
  --nav-bg-solid:   rgba(255, 255, 255, .98);
  --overlay:        rgba(255, 255, 255, .6);
  --overlay-strong: rgba(255, 255, 255, .82);

  --footer-bg: #ffffff;
  --on-grad:   #ffffff;
}

/* 浅色底上的品牌标识：给 Logo 一个浅灰底衬，避免白色 Logo 融进背景 */
html[data-style="paper"] .brand__mark { background: var(--bg-alt); }
html[data-style="paper"] .brand__logo { padding: 3px; }

/* 浅色底上的画布光效与网格线需要收敛，否则会显得发灰 */
html[data-style="paper"] .hero__canvas { opacity: .3; }
html[data-style="paper"] .hero__grid { opacity: .5; }

/* 浅色底上保留清晰的分区层次 */
html[data-style="paper"] .nav.is-scrolled { box-shadow: 0 8px 30px -22px rgba(15, 23, 42, .45); }
html[data-style="paper"] .footer { box-shadow: 0 -1px 0 var(--line); }
html[data-style="paper"] .card,
html[data-style="paper"] .plan,
html[data-style="paper"] .news__item { background-color: var(--surface); }