/* =========================================================
   光轴 Optaxis · Web 液态玻璃 —— 全站唯一真源
   ---------------------------------------------------------
   把 app 侧 docs/DESIGN-SYSTEM.md §15「光轴液态玻璃」的材质标准
   搬到 optaxis.app。方向 / 色板 / 版式 / 文案全不变,只把表面材质
   从「不透明平卡」升级为「半透明磨砂玻璃」,并补 day / night 两模式。

   配方顺序严格照 §15.3：
     material 磨砂 → tint 定明暗 → 顶面镜面高光
     → 底缘 bevel → 1px 棱边 stroke → 悬浮 shadow

   🔴 色板是全站唯一定义处。index.html / support.html / terms.html /
   privacy-policy.html 都 link 这个文件,不要在页面里另抄一份 —— 抄了
   就会漂移,这正是 app 侧配了 check-design-tokens 守卫要防的那类事。

   变量名沿用 Direction C · Refraction v2.0 原名,只在 [data-mode="night"]
   下重新赋值,页面里几百处 var(--bg-card) / var(--ink) 的 call site 零改动。
   ========================================================= */

/* ---------- day(默认):玻璃浮在 cream 纸底 ---------- */
:root, [data-mode="day"] {
  --bg:        #F5F1E8;   /* cream */
  --bg-card:   #FFFFFF;
  --bg-card2:  #FAF6EC;
  --bg-ink:    #2A2520;
  --ink:       #2A2520;
  --ink2:      #6B645B;
  --ink3:      #948B7C;
  --ink4:      #C4BBAA;
  --gold:      #C9A66B;
  --gold-dark: #8B6B3D;
  --hairline:  rgba(42, 37, 32, 0.10);
  --gold-line: rgba(139, 107, 61, 0.30);

  /* 纸底:§15.3 要求比纯 cream 深一档,否则近白玻璃卡会塌成浅灰平卡 */
  --paper-1: #F8F5EF;
  --paper-2: #E8E2D7;
  --paper-3: #DAD3C6;
  --glow-1: rgba(201, 166, 107, 0.26);
  --glow-2: rgba(139, 107, 61, 0.15);
  --glow-3: rgba(139, 107, 61, 0.10);
  --band-veil-1: rgba(127, 118, 104, 0.10);
  --band-veil-2: rgba(127, 118, 104, 0.17);

  /* 玻璃六件套 */
  --glass-blur:   22px;
  --glass-sat:    168%;
  --glass-tint:   rgba(254, 252, 248, 0.56);
  --glass-tint-2: rgba(250, 246, 236, 0.42);
  --glass-spec:   rgba(255, 255, 255, 0.62);
  --glass-bevel:  rgba(255, 255, 255, 0.46);
  --glass-edge:   rgba(255, 255, 255, 0.70);
  --glass-edge-2: rgba(42, 37, 32, 0.07);
  --glass-shadow: 0 14px 34px -12px rgba(42, 37, 32, 0.20), 0 2px 6px rgba(42, 37, 32, 0.05);
  --glass-shadow-lift: 0 22px 48px -14px rgba(42, 37, 32, 0.26), 0 3px 8px rgba(42, 37, 32, 0.07);
  --on-glass:     #241F1A;
  --on-glass-dim: #5E574E;
  --dock-tint: rgba(252, 250, 245, 0.70);

  /* 实色面 + 压在其上的字(对应 app 的 ALPAFill / onInk 语义拆分) */
  --fill-ink:  #2A2520;
  --on-ink:    #F5F1E8;
  --fill-gold: #8B6B3D;
  --on-gold:   #FEFCF8;

  color-scheme: light;
}

/* ---------- night:石墨黑烟熏玻璃 ---------- */
[data-mode="night"] {
  --bg:        #14120F;
  --bg-card:   #2B2823;
  --bg-card2:  #24211D;
  --bg-ink:    #0E0D0C;
  --ink:       #F0EBE1;
  --ink2:      #B5AC9D;
  --ink3:      #A79D8E;
  --ink4:      #6A6358;
  /* accent 作「前景」时夜间提亮(§15 语义拆分) */
  --gold:      #DCBB80;
  --gold-dark: #C9A66B;
  --hairline:  rgba(255, 255, 255, 0.10);
  --gold-line: rgba(201, 166, 107, 0.34);

  --paper-1: #23201C;
  --paper-2: #14120F;
  --paper-3: #0B0A09;
  /* 暗底上同样的 alpha 是「提亮」,不压到 day 的 ~40% 就会露出光斑边界 */
  --glow-1: rgba(201, 166, 107, 0.10);
  --glow-2: rgba(139, 107, 61, 0.07);
  --glow-3: rgba(201, 166, 107, 0.05);
  --band-veil-1: rgba(0, 0, 0, 0.20);
  --band-veil-2: rgba(0, 0, 0, 0.30);

  --glass-blur:   26px;
  --glass-sat:    140%;
  --glass-tint:   rgba(64, 59, 52, 0.44);
  --glass-tint-2: rgba(48, 44, 39, 0.42);
  --glass-spec:   rgba(255, 255, 255, 0.13);
  --glass-bevel:  rgba(255, 255, 255, 0.05);
  --glass-edge:   rgba(255, 255, 255, 0.11);
  --glass-edge-2: rgba(0, 0, 0, 0.30);
  --glass-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.66), 0 2px 8px rgba(0, 0, 0, 0.32);
  --glass-shadow-lift: 0 28px 60px -16px rgba(0, 0, 0, 0.74), 0 4px 12px rgba(0, 0, 0, 0.36);
  --on-glass:     #F2EDE4;
  --on-glass-dim: #B3AA9C;
  --dock-tint: rgba(40, 37, 33, 0.62);

  /* 实色面反色:深墨底白字在石墨纸底上会整块糊掉 */
  --fill-ink:  #EDE7DB;
  --on-ink:    #221E1A;
  --fill-gold: #C9A66B;
  --on-gold:   #241F1A;

  color-scheme: dark;
}

/* =========================================================
   纸底 —— 玻璃必须有东西可透
   🔴 必须是「整篇文档高」的 absolute 而不是 fixed:
   fixed 的话每一屏玻璃背后都是同一段背景,滚到第二屏起卡片就开始发平
   —— §15.3「纯 cream 均匀底上玻璃塌成浅灰卡」在 web 上的形态。
   光斑尺寸刻意开大,小光斑在暗底上会露出可见的椭圆边界。
   上下各留 260px 余量,给视差位移用(位移量在页面脚本里 clamp)。
   ========================================================= */
.paper {
  position: absolute; top: -260px; left: 0; right: 0; height: calc(100% + 520px);
  z-index: 0; pointer-events: none;
  background:
    radial-gradient(1500px 1000px at 12% 2%,  var(--glow-1), transparent 60%),
    radial-gradient(1300px 900px  at 94% 15%, var(--glow-2), transparent 62%),
    radial-gradient(1400px 1000px at 6%  38%, var(--glow-2), transparent 62%),
    radial-gradient(1500px 1100px at 96% 58%, var(--glow-1), transparent 60%),
    radial-gradient(1300px 900px  at 18% 78%, var(--glow-3), transparent 62%),
    radial-gradient(1400px 1000px at 82% 96%, var(--glow-2), transparent 62%),
    linear-gradient(178deg,
      var(--paper-1) 0%, var(--paper-2) 26%, var(--paper-1) 46%,
      var(--paper-3) 68%, var(--paper-2) 84%, var(--paper-1) 100%);
  transform: translate3d(0, var(--paper-shift, 0px), 0);
  transition: background .45s ease;
  will-change: transform;
}

/* =========================================================
   玻璃 mixin —— §15.3 六步配方
   顶面镜面高光走 background 第一层而不是伪元素:
   ::before 会新建层叠上下文压住卡内文字,是玻璃化最常见的返工点。
   ========================================================= */
.glass {
  background:
    linear-gradient(180deg, var(--glass-spec) 0%, rgba(255,255,255,0) 44%),
    var(--glass-tint);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
          backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-edge);
  border-bottom-color: var(--glass-edge-2);
  box-shadow: var(--glass-shadow), inset 0 -1px 0 var(--glass-bevel);
  color: var(--on-glass);
  transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease, background .45s ease;
}
/* 无 backdrop-filter 的浏览器(旧 Firefox / 部分安卓 WebView)降级:
   加深 tint 保住可读性,等价于 Android haze 的 fallbackTint 降级路径 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-mode="day"]   .glass { background: rgba(254, 252, 248, 0.93); }
  [data-mode="night"] .glass { background: rgba(46, 43, 38, 0.94); }
}

/* =========================================================
   右上角:昼夜开关 + 4 语切换
   🔴 lang-switch.css 自带 @media (prefers-color-scheme: dark) 分支,
   会和手动昼夜开关打架(系统浅色 + 手动切夜 = 语言钮仍是白的,压在深色页上)。
   两个方向都要显式赢回来。
   ========================================================= */
.topbar {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
}
.topbar .lang-switch { position: static; top: auto; right: auto; }

:root[data-mode="day"] .lang-switch {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(42, 37, 32, 0.10);
}
:root[data-mode="day"] .lang-switch button { color: #6B645B; }
:root[data-mode="day"] .lang-switch button:hover { color: #2A2520; }
:root[data-mode="day"] .lang-switch button.active { background: #2A2520; color: #F5F1E8; }
:root[data-mode="night"] .lang-switch {
  background: rgba(42, 37, 32, 0.85);
  border-color: rgba(201, 166, 107, 0.20);
}
:root[data-mode="night"] .lang-switch button { color: #C9A66B; }
:root[data-mode="night"] .lang-switch button:hover { color: #F5F1E8; }
:root[data-mode="night"] .lang-switch button.active { background: #C9A66B; color: #2A2520; }

.theme-toggle {
  appearance: none; -webkit-appearance: none; cursor: pointer; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--on-glass-dim);
  background:
    linear-gradient(180deg, var(--glass-spec) 0%, rgba(255,255,255,0) 46%),
    var(--dock-tint);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  transition: color .2s, background .45s;
}
.theme-toggle:hover { color: var(--gold-dark); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .i-moon { display: none; }
[data-mode="night"] .theme-toggle .i-sun  { display: none; }
[data-mode="night"] .theme-toggle .i-moon { display: block; }
/* 自动档提示点:跟随系统时亮着,手动覆盖后隐藏(对齐 app §15.1.1) */
.theme-toggle::after {
  content: ''; position: absolute; top: 2px; right: 2px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  opacity: 0; transition: opacity .2s;
}
[data-theme-auto="1"] .theme-toggle::after { opacity: .9; }

/* =========================================================
   悬浮玻璃导航坞
   ========================================================= */
.dock {
  display: flex; align-items: center; gap: 4px;
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 999;
  padding: 8px 10px 8px 14px; border-radius: 22px;
  background:
    linear-gradient(180deg, var(--glass-spec) 0%, rgba(255,255,255,0) 46%),
    var(--dock-tint);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid var(--glass-edge);
  border-bottom-color: var(--glass-edge-2);
  box-shadow: var(--glass-shadow), inset 0 -1px 0 var(--glass-bevel);
  transition: background .45s ease, box-shadow .45s ease;
}
.dock .dock-mark { width: 20px; height: 20px; display: block; margin-right: 6px; }
.dock a {
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: 10.5px; font-weight: 500; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--on-glass-dim); padding: 7px 12px;
  border-radius: 999px; text-decoration: none;
  transition: background .2s, color .2s;
}
.dock a:hover { color: var(--on-glass); background: rgba(127,118,104,.14); opacity: 1; text-decoration: none; }
.dock a.cta { background: var(--fill-ink); color: var(--on-ink); }
.dock a.cta:hover { background: var(--fill-gold); color: var(--on-gold); }

/* 品牌标是深墨 + 金线的彩色 SVG,夜间需整体提亮才压得住石墨底 */
[data-mode="night"] .dock .dock-mark,
[data-mode="night"] .hero-lockup,
[data-mode="night"] .footer-mark { filter: brightness(0) invert(1) sepia(.28) saturate(1.5) hue-rotate(-8deg); }

/* 窄屏收起导航坞:页面里本来就有下载入口 / 页脚链接,不必再占一条 */
@media (max-width: 900px) { .dock { display: none; } }
@media (max-width: 480px) {
  .topbar { top: 10px; right: 10px; gap: 6px; }
  .theme-toggle { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .paper { transform: none !important; }
}