/* ══════════════════════════════════════════════════════════════
   theme.css — PodVault 全站共用主題（深色 / 淺色）
   規格：docs/planning/THEME-SYSTEM-PLAN.md
   規則：
   - 深色為預設值，放 :root；淺色放 html[data-theme="light"]。
   - 所有頁面主題色一律讀這裡的變數，頁面不得自維護整套色票。
   - 變數名沿用既有命名（--bg-deep / --text-primary / --accent-gold …）
     以相容現有頁面；頁面拿掉自己的 :root、引入本檔即自動生效。
   ══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* 背景層次 */
  --bg-deep:      #0a0908;
  --bg-card:      #131211;
  --bg-elevated:  #1a1816;
  --bg-sidebar:   #0d0c0b;

  /* 邊框 */
  --border-subtle: rgba(255,255,255,0.06);
  --border-medium: rgba(255,255,255,0.10);
  --border-gold:   rgba(200,169,126,0.28);

  /* 文字 */
  --text-primary:   #e8e6e3;
  --text-read:      #c5c3bd;   /* 長文閱讀（wiki 內文 / 集數描述） */
  --text-secondary: #98968f;
  --text-tertiary:  #7d7a74;   /* 計畫要求：由 #6b6964 調亮至 4.5:1（深底 4.65:1） */

  /* 品牌金 + 地區強調 */
  --accent-gold:       #c8a97e;
  --accent-gold-light: #d4b896;
  --accent-rose:       #b8857a;
  --accent-wasabi:     #8a9a6b;
  --accent-saffron:    #d4a547;
  --accent-crimson:    #9b3030;

  /* 狀態色 */
  --status-success: #6aaa80;
  --status-warning: #d4a547;
  --status-error:   #d46a6a;
  --status-info:    #7aa0d4;

  /* 實體類型色（徽章 / 圖譜節點；Canvas 亦讀取） */
  --type-store:    #5a8a6a;
  --type-person:   #b8857a;
  --type-location: #5a80b0;
  --type-concept:  #6b6964;
  --type-episode:  #c8a97e;

  /* 特效透明度（淺色會降低） */
  --fx-glow-opacity:  0.18;
  --fx-grain-opacity: 0.40;
  --fx-nav-bg:        rgba(10,9,8,0.82);   /* 毛玻璃導航底 */
  --fx-overlay-bg:    rgba(10,9,8,0.90);   /* 遮罩 / 浮層底 */

  /* 半透明表面（疊在光暈背景上的毛玻璃卡片 / 浮層；淺色會翻成暖白半透明） */
  --surface-card:       rgba(19,18,17,0.80);
  --surface-card-hover: rgba(26,24,22,0.92);
  --surface-glass:      rgba(10,9,8,0.85);

  /* 表面 / 疊層 token（§3.1：頁面一律用 var()，禁止自建 [data-theme] 色覆蓋）
     深色＝原頁面值（零回歸）；淺色＝暖紙張對應值 */
  --surface-input:  rgba(255,255,255,0.04);  /* 輸入框 / select / textarea 淡底 */
  --surface-faint:  rgba(255,255,255,0.02);  /* 極淡列 / 卡片微底 */
  --surface-hover:  rgba(255,255,255,0.03);  /* 表格列 / 清單 hover */
  --surface-locked: rgba(10,9,8,0.60);       /* 付費牆遮罩面板 */
  --fx-panel-bg:    rgba(13,12,11,0.97);      /* 浮起實心面板：播放器 / 選單 / FAB */
  --track-bg:       rgba(255,255,255,0.10);   /* 進度條軌道 */
  --scrim:          rgba(0,0,0,0.70);         /* Modal 對話框遮罩 */
  --ripple:         rgba(255,255,255,0.08);   /* 按鈕漣漪 ::before */
  --skeleton-lo:    rgba(255,255,255,0.04);   /* 骨架微光低停點 */
  --skeleton-hi:    rgba(255,255,255,0.08);   /* 骨架微光高停點 */
  --on-gold:        #0a0908;                  /* 金色填充按鈕上的文字 / 圖示 */

  /* 首頁區塊 band / oracle 漸層停點（§3.1：漸層停點也用 token；深色＝原值零回歸）*/
  --fx-section-band: rgba(15,17,24,0.4);      /* 嘉賓區半透明帶 */
  --fx-oracle-top:   rgba(28,22,14,0.85);     /* oracle 漸層頂 */
  --fx-oracle-mid:   rgba(14,12,10,0.92);     /* oracle 漸層中 */

  /* 滿版回饋狀態（核銷成功/失敗、操作結果大螢幕；成人/相機畫面不套用）*/
  --fb-success-bg:  #0d2b1a;   /* 成功滿版底 */
  --fb-success-fg:  #7de8a8;   /* 成功大字 / icon */
  --fb-error-bg:    #2b0d0d;   /* 失敗滿版底 */
  --fb-error-fg:    #e87d7d;   /* 失敗大字 / icon */

  /* 形狀 / 動畫（不隨主題變） */
  --radius-soft:   4px;
  --radius-medium: 8px;
  --radius-pill:   100px;
  --transition-smooth: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* 瀏覽器分頁列顏色（theme.js 會同步寫入 <meta name="theme-color">） */
  --meta-theme-color: #0a0908;
}

/* ── 淺色：暖紙張 Luxury Editorial（配色 A，波尼認可）── */
html[data-theme="light"] {
  color-scheme: light;

  --bg-deep:      #f4efe4;
  --bg-card:      #fbf7ef;
  --bg-elevated:  #efe8de;
  --bg-sidebar:   #ece4d6;

  --border-subtle: rgba(58,48,33,0.10);
  --border-medium: rgba(58,48,33,0.17);
  --border-gold:   rgba(150,110,55,0.40);

  --text-primary:   #241f19;
  --text-read:      #37302a;   /* on #f4efe4 = 11.3:1 */
  --text-secondary: #554d42;
  --text-tertiary:  #766c5d;

  --accent-gold:       #89642a;   /* 紙底 4.67:1 達 AA（原 #96702f 僅 3.93） */
  --accent-gold-light: #89642a;   /* 亮色下與 gold 同值，確保金色強調字達標 */
  --accent-rose:       #a15a53;
  --accent-wasabi:     #5f6f42;
  --accent-saffron:    #8a6d1e;
  --accent-crimson:    #8f2929;

  --status-success: #3d6b4d;
  --status-warning: #8a6d1e;
  --status-error:   #8f2929;
  --status-info:    #3a5f85;

  --type-store:    #3d6b4d;
  --type-person:   #a15a53;
  --type-location: #3a5f85;
  --type-concept:  #766c5d;
  --type-episode:  #96702f;

  --fx-glow-opacity:  0.09;
  --fx-grain-opacity: 0.10;
  --fx-nav-bg:        rgba(248,243,235,0.82);
  --fx-overlay-bg:    rgba(244,239,228,0.90);

  --surface-card:       rgba(251,247,239,0.82);
  --surface-card-hover: rgba(239,232,222,0.92);
  --surface-glass:      rgba(244,239,228,0.85);

  --surface-input:  rgba(0,0,0,0.025);
  --surface-faint:  rgba(0,0,0,0.015);
  --surface-hover:  rgba(0,0,0,0.03);
  --surface-locked: rgba(0,0,0,0.03);
  --fx-panel-bg:    rgba(251,247,239,0.97);
  --track-bg:       rgba(0,0,0,0.12);
  --scrim:          rgba(58,48,33,0.45);
  --ripple:         rgba(0,0,0,0.06);
  --skeleton-lo:    rgba(0,0,0,0.04);
  --skeleton-hi:    rgba(0,0,0,0.08);
  --on-gold:        #fbf7ef;

  --fx-section-band: rgba(226,216,198,0.5);   /* 嘉賓區半透明帶（暖白）*/
  --fx-oracle-top:   rgba(238,230,216,0.85);  /* oracle 漸層頂（暖白）*/
  --fx-oracle-mid:   rgba(244,239,228,0.92);  /* oracle 漸層中（暖白）*/

  --fb-success-bg:  #e3efe6;
  --fb-success-fg:  #2f6b45;
  --fb-error-bg:    #f2e6e5;
  --fb-error-fg:    #8f2929;

  --meta-theme-color: #f4efe4;
}

/* ══ 共用主題切換按鈕 ══
   任何頁面放 <button class="theme-toggle" data-theme-toggle> 即可，
   theme.js 會自動填入圖示 / 文字 / aria 並綁定點擊。 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-pill);
  transition: color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { color: var(--accent-gold); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 2px; }
.theme-toggle .theme-toggle-text { font-size: 0.8rem; }
@media (max-width: 640px) {
  .theme-toggle .theme-toggle-text { display: none; }  /* 手機只留圖示 */
}

/* ══ 手機導覽列：主題切換鈕移到 logo 與漢堡之間 ══
   §3.1：僅引用既有 token，色彩集中本檔，頁面不另定色。
   只在含 .theme-toggle-mobile 的導覽列（＝有漢堡抽屜的頁面）生效。 */
.theme-toggle-mobile { display: none; }
.theme-toggle-mobile .theme-toggle-text { display: none; } /* 中央切換鈕只留圖示 */
@media (max-width: 768px) {
  .theme-toggle-mobile { display: inline-flex; }
  /* 抽屜內原切換鈕整列隱藏，避免與 navbar 中央的重複 */
  nav:has(.theme-toggle-mobile) .nav-links li:has(> .theme-toggle) { display: none; }
  /* 抽屜背景改用完全不透明的提升層 token，徹底解決半透明穿透（原 --surface-glass 0.85 太透）*/
  nav:has(.theme-toggle-mobile) .nav-links { background: var(--bg-elevated); }
}