/* ═══════════════════════════════════════════════════════════════
   馥靈之鑰 Design Token System v1.2 (SAFE)
   2026/3/21
   
   安全策略：所有樣式都在 .hl-dt-* scope 內
   引入此 CSS 不會影響任何現有頁面
   只有手動加了 class 的區塊才會生效
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── 基底色票 ─── */
  --hl-base-dark:         #05030a;
  --hl-base-dark-soft:    #0d0917;
  --hl-base-dark-panel:   rgba(14, 10, 24, 0.82);
  --hl-base-dark-glass:   rgba(10, 6, 20, 0.72);
  --hl-base-cream:        #f9f3e8;
  --hl-base-cream-soft:   #efe5d8;
  --hl-base-cream-glass:  rgba(249, 243, 232, 0.85);

  /* ─── 品牌金色系 ─── */
  --hl-gold:              #f8dfa5;
  --hl-gold-deep:         #d4a850;
  --hl-gold-dark:         #8b6914;
  --hl-gold-darker:       #6b5210;

  /* ─── 金色發光系統 ─── */
  --hl-glow-gold:         0 0 20px rgba(248,223,165,0.25);
  --hl-glow-gold-md:      0 0 32px rgba(248,223,165,0.18), 0 0 8px rgba(248,223,165,0.3);
  --hl-glow-gold-lg:      0 0 48px rgba(248,223,165,0.15), 0 0 16px rgba(248,223,165,0.25);
  --hl-glow-gold-text:    0 0 12px rgba(248,223,165,0.4);
  --hl-glow-gold-border:  0 0 8px rgba(248,223,165,0.2);
  --hl-glow-gold-hover:   0 0 40px rgba(248,223,165,0.3), 0 0 12px rgba(248,223,165,0.4);
  --hl-gold-gradient:     linear-gradient(135deg, #fbe6c2 0%, #f8dfa5 30%, #ecd098 70%, #fff9ea 100%);

  /* ─── 透明邊框 ─── */
  --hl-border-glow:       1px solid rgba(248,223,165,0.2);
  --hl-border-glow-hover: 1px solid rgba(248,223,165,0.4);
  --hl-border-glass:      1px solid rgba(255,255,255,0.08);
  --hl-border-cream:      1px solid rgba(180,160,120,0.2);

  /* ─── 色彩令牌 ─── */
  --hl-light-h1:#2a1f0e; --hl-light-h2:#6b5210; --hl-light-h3:#4a3c2a;
  --hl-light-body:#2a2218; --hl-light-muted:#6b5a42; --hl-light-link:#7050a0;

  --hl-light-dark-h1:#f8dfa5; --hl-light-dark-h2:#ffffff; --hl-light-dark-h3:#ecd098;
  --hl-light-dark-body:rgba(255,255,255,0.88); --hl-light-dark-muted:rgba(255,255,255,0.6);

  --hl-dark-h1:#f8dfa5; --hl-dark-h2:#ffffff; --hl-dark-h3:#ecd098;
  --hl-dark-body:rgba(255,255,255,0.92); --hl-dark-muted:rgba(255,255,255,0.65);
  --hl-dark-link:#c9a6ff;

  --hl-dark-light-h1:#2a1f0e; --hl-dark-light-h2:#6b5210; --hl-dark-light-h3:#4a3c2a;
  --hl-dark-light-body:#2a2218; --hl-dark-light-muted:#6b5a42;
}

/* ═══════════════════════════════════════════════════════════
   以下所有規則都在 .hl-dt 命名空間內
   不加 .hl-dt 的頁面 = 零影響
   ═══════════════════════════════════════════════════════════ */

/* A 淺色 */
.hl-dt .hl-section-light{background:var(--hl-base-cream);color:var(--hl-light-body)}
.hl-dt .hl-section-light h1{color:var(--hl-light-h1);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-light h2{color:var(--hl-light-h2);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-light h3{color:var(--hl-light-h3);font-weight:600}
.hl-dt .hl-section-light p{color:var(--hl-light-body)}
.hl-dt .hl-section-light .hl-muted{color:var(--hl-light-muted)}
.hl-dt .hl-section-light a{color:var(--hl-light-link)}

/* B 淺色頁＋深底玻璃 */
.hl-dt .hl-section-light-dark{
  background:var(--hl-base-dark-panel);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:var(--hl-border-glow);
  box-shadow:var(--hl-glow-gold-border);
  color:var(--hl-light-dark-body);
}
.hl-dt .hl-section-light-dark h1{color:var(--hl-light-dark-h1);text-shadow:var(--hl-glow-gold-text);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-light-dark h2{color:var(--hl-light-dark-h2);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-light-dark h3{color:var(--hl-light-dark-h3);font-weight:600}
.hl-dt .hl-section-light-dark p{color:var(--hl-light-dark-body)}
.hl-dt .hl-section-light-dark .hl-muted{color:var(--hl-light-dark-muted)}

/* C 深色 */
.hl-dt .hl-section-dark{background:var(--hl-base-dark);color:var(--hl-dark-body)}
.hl-dt .hl-section-dark h1{color:var(--hl-dark-h1);text-shadow:var(--hl-glow-gold-text);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-dark h2{color:var(--hl-dark-h2);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-dark h3{color:var(--hl-dark-h3);font-weight:600}
.hl-dt .hl-section-dark p{color:var(--hl-dark-body)}
.hl-dt .hl-section-dark .hl-muted{color:var(--hl-dark-muted)}
.hl-dt .hl-section-dark a{color:var(--hl-dark-link)}

/* D 深色頁＋淺底毛玻璃 */
.hl-dt .hl-section-dark-light{
  background:var(--hl-base-cream-glass);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:var(--hl-border-cream);
  color:var(--hl-dark-light-body);
}
.hl-dt .hl-section-dark-light h1{color:var(--hl-dark-light-h1);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-dark-light h2{color:var(--hl-dark-light-h2);font-family:"Noto Serif TC",serif;font-weight:700}
.hl-dt .hl-section-dark-light h3{color:var(--hl-dark-light-h3);font-weight:600}
.hl-dt .hl-section-dark-light p{color:var(--hl-dark-light-body)}
.hl-dt .hl-section-dark-light .hl-muted{color:var(--hl-dark-light-muted)}

/* ═══ 金色發光元件（也在 .hl-dt 內） ═══ */

.hl-dt .hl-glow-title{
  background:var(--hl-gold-gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;filter:drop-shadow(0 0 8px rgba(248,223,165,0.3));
}
.hl-dt .hl-glow-card{border:var(--hl-border-glow);box-shadow:var(--hl-glow-gold);transition:box-shadow .4s ease,border-color .4s ease}
.hl-dt .hl-glow-card:hover,.hl-dt .hl-glow-card:active{border:var(--hl-border-glow-hover);box-shadow:var(--hl-glow-gold-hover)}

.hl-dt .hl-glow-btn{
  background:linear-gradient(135deg,var(--hl-gold),var(--hl-gold-deep));
  color:#0a0814;border:none;box-shadow:var(--hl-glow-gold-md);
  transition:box-shadow .3s ease,transform .2s ease;
  min-height:48px;padding:12px 24px;border-radius:12px;font-size:1rem;font-weight:700;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.hl-dt .hl-glow-btn:hover,.hl-dt .hl-glow-btn:active{box-shadow:var(--hl-glow-gold-hover);transform:translateY(-1px)}

.hl-dt .hl-glow-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(248,223,165,0.4),transparent);border:none;box-shadow:0 0 8px rgba(248,223,165,0.15)}
.hl-dt .hl-glow-border{border:var(--hl-border-glow);box-shadow:var(--hl-glow-gold-border),inset 0 0 30px rgba(248,223,165,0.03)}

/* ═══ 手機優先字級（只在 .hl-dt 內） ═══ */

.hl-dt h1{font-size:1.5rem;line-height:1.45;letter-spacing:.02em;word-break:keep-all;overflow-wrap:break-word}
.hl-dt h2{font-size:1.2rem;line-height:1.5}
.hl-dt h3{font-size:1.05rem;line-height:1.55}
.hl-dt p{font-size:1rem;line-height:1.85}
.hl-dt .hl-muted{font-size:.875rem;line-height:1.6}

@media(min-width:768px){
  .hl-dt h1{font-size:2rem} .hl-dt h2{font-size:1.5rem}
  .hl-dt h3{font-size:1.2rem} .hl-dt p{font-size:1.05rem;line-height:1.8}
}
@media(min-width:1200px){
  .hl-dt h1{font-size:2.5rem} .hl-dt h2{font-size:1.75rem} .hl-dt h3{font-size:1.35rem}
}

/* ═══ 手機優化（只在 .hl-dt 內） ═══ */

.hl-dt .hl-section-light,.hl-dt .hl-section-dark,
.hl-dt .hl-section-light-dark,.hl-dt .hl-section-dark-light{
  padding:32px 20px;border-radius:16px;
}
@media(min-width:768px){
  .hl-dt .hl-section-light,.hl-dt .hl-section-dark,
  .hl-dt .hl-section-light-dark,.hl-dt .hl-section-dark-light{
    padding:48px 40px;border-radius:20px;
  }
}

.hl-dt input,.hl-dt select,.hl-dt textarea{
  -webkit-appearance:none;appearance:none;
  border-radius:12px;padding:14px 16px;font-size:16px;min-height:48px;
  width:100%;box-sizing:border-box;transition:border-color .3s ease,box-shadow .3s ease;
}
.hl-dt .hl-section-dark input,.hl-dt .hl-section-dark select,.hl-dt .hl-section-dark textarea{
  background:rgba(20,16,32,0.9);color:#fff;border:1px solid rgba(248,223,165,0.2);
}
.hl-dt .hl-section-dark input:focus,.hl-dt .hl-section-dark select:focus,.hl-dt .hl-section-dark textarea:focus{
  border-color:var(--hl-gold);box-shadow:var(--hl-glow-gold);outline:none;
}
.hl-dt .hl-section-dark select option{background:#1a1520;color:#fff}