/* ==========================================================================
   StockPulse Podcast · LazzyMerlin 共用主題（深/淺色 + RWD + 材質）
   - 預設跟隨系統色彩；右上角 🌙/☀️ 可手動切換並記住（localStorage）
   - 所有顏色走 CSS 變數，元件樣式在各頁 <style> 引用這裡的變數
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;600&family=LXGW+WenKai+TC:wght@400&display=swap');

/* ── 字體 / 共用 token（不分色） ── */
:root{
  --fd:'LXGW WenKai TC','Noto Sans TC',serif;
  --fs:'Geist','Noto Sans TC','PingFang TC',-apple-system,sans-serif;
  --fm:'Geist Mono',ui-monospace,monospace;
}

/* ── 深色（預設 · midnight-petrol） ── */
:root{
  --bg:#0F1C26;--card:#16252F;--card2:#1C2E38;
  --line:rgba(245,239,228,.10);--hair:rgba(94,122,141,.30);
  --txt:#F5EFE4;--sub:#DECCA7;
  --accent:#5E7A8D;--accent-deep:#46647C;--on-brand:#F5EFE4;
  --up:#C77E6A;--down:#7E9173;--warn:#CB9B52;--yellow:#CB9B52;
  --blue:#7FA0B3;--purple:#B79B7E;--stone:#967459;
  --up-bg:rgba(199,126,106,.16);--up-bd:rgba(199,126,106,.45);
  --down-bg:rgba(126,145,115,.16);--down-bd:rgba(126,145,115,.45);
  --warn-bg:rgba(203,155,82,.14);--warn-bd:rgba(203,155,82,.42);
  --accent-bg:rgba(94,122,141,.10);--accent-tint:rgba(94,122,141,.20);
  --stone-bg:rgba(150,116,89,.20);--stone-bd:rgba(150,116,89,.45);
  --glow:rgba(94,122,141,.18);--noise-blend:soft-light;--noise-op:.30;
  --btn-drop:rgba(0,0,0,.50);
  --sh-card:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.03),4px 6px 14px rgba(0,0,0,.45);
  --sh-chip:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(0,0,0,.40),1px 2px 3px rgba(0,0,0,.40),3px 5px 8px rgba(0,0,0,.30);
}

/* ── 淺色變數定義（給「跟隨系統」與「手動指定」共用） ── */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F5EFE4;--card:#FBF8F0;--card2:#EEE5D4;
    --line:rgba(15,28,38,.10);--hair:rgba(150,116,89,.32);
    --txt:#0F1C26;--sub:#6E5847;
    --accent:#46647C;--accent-deep:#46647C;--on-brand:#F5EFE4;
    --up:#9E5949;--down:#4F5E45;--warn:#9A6E1F;--yellow:#9A6E1F;
    --blue:#3D5A6C;--purple:#7C6244;--stone:#7A5C45;
    --up-bg:rgba(158,89,73,.12);--up-bd:rgba(158,89,73,.42);
    --down-bg:rgba(79,94,69,.14);--down-bd:rgba(79,94,69,.42);
    --warn-bg:rgba(203,155,82,.22);--warn-bd:rgba(154,110,31,.5);
    --accent-bg:rgba(70,100,124,.08);--accent-tint:rgba(70,100,124,.14);
    --stone-bg:rgba(122,92,69,.14);--stone-bd:rgba(122,92,69,.4);
    --glow:rgba(94,122,141,.12);--noise-blend:overlay;--noise-op:.28;--btn-drop:rgba(15,28,38,.35);
    --sh-card:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(33,23,21,.10),inset 0 0 0 1px rgba(33,23,21,.05),4px 6px 14px rgba(33,23,21,.12);
    --sh-chip:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(15,28,38,.16),inset 0 0 0 1px rgba(15,28,38,.05),1px 2px 3px rgba(15,28,38,.12),3px 5px 8px rgba(15,28,38,.10);
  }
}
/* 手動指定淺色（覆蓋系統與深色） */
:root[data-theme="light"]{
  --bg:#F5EFE4;--card:#FBF8F0;--card2:#EEE5D4;
  --line:rgba(15,28,38,.10);--hair:rgba(150,116,89,.32);
  --txt:#0F1C26;--sub:#6E5847;
  --accent:#46647C;--accent-deep:#46647C;--on-brand:#F5EFE4;
  --up:#9E5949;--down:#4F5E45;--warn:#9A6E1F;--yellow:#9A6E1F;
  --blue:#3D5A6C;--purple:#7C6244;--stone:#7A5C45;
  --up-bg:rgba(158,89,73,.12);--up-bd:rgba(158,89,73,.42);
  --down-bg:rgba(79,94,69,.14);--down-bd:rgba(79,94,69,.42);
  --warn-bg:rgba(203,155,82,.22);--warn-bd:rgba(154,110,31,.5);
  --accent-bg:rgba(70,100,124,.08);--accent-tint:rgba(70,100,124,.14);
  --stone-bg:rgba(122,92,69,.14);--stone-bd:rgba(122,92,69,.4);
  --glow:rgba(94,122,141,.12);--noise-blend:overlay;--noise-op:.28;
  --sh-card:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(33,23,21,.10),inset 0 0 0 1px rgba(33,23,21,.05),4px 6px 14px rgba(33,23,21,.12);
  --sh-chip:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(15,28,38,.16),inset 0 0 0 1px rgba(15,28,38,.05),1px 2px 3px rgba(15,28,38,.12),3px 5px 8px rgba(15,28,38,.10);
}

html{scroll-behavior:smooth}
*{box-sizing:border-box;margin:0;padding:0}
/* 鍵盤焦點環（全域） */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
:focus:not(:focus-visible){outline:none}
body{
  background:var(--bg);color:var(--txt);font-family:var(--fs);
  line-height:1.7;padding:24px;position:relative;
  transition:background .25s ease,color .25s ease;
}
/* 材質 noise + 環境光（隨主題切換 blend / 強度） */
body::after{content:"";position:fixed;inset:0;background:url(tactile-noise.png) repeat;background-size:256px 256px;mix-blend-mode:var(--noise-blend);opacity:var(--noise-op);pointer-events:none;z-index:0}
body::before{content:"";position:fixed;inset:0;background:radial-gradient(125% 80% at 50% -8%,var(--glow),transparent 62%);pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1}

/* ── 主題切換鈕（右上角） ── */
.theme-toggle{
  position:fixed;top:14px;right:14px;z-index:60;
  width:42px;height:42px;border-radius:9999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--txt);
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-chip);transition:.15s;
}
.theme-toggle:hover{box-shadow:var(--sh-chip),0 0 0 1px var(--accent)}
.theme-toggle .sun{display:none}.theme-toggle .moon{display:inline}
:root[data-theme="light"] .theme-toggle .sun{display:inline}
:root[data-theme="light"] .theme-toggle .moon{display:none}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .theme-toggle .sun{display:inline}
  :root:not([data-theme="dark"]) .theme-toggle .moon{display:none}
}

/* ── 導覽列（共用 · 依 DS Tactile-Raised 規範） ── */
.nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0 6px}
.nav a{
  font-family:var(--fs);font-size:12.5px;font-weight:500;
  padding:7px 14px;border-radius:9999px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);color:var(--sub);
  box-shadow:var(--sh-chip);transition:transform .18s,box-shadow .18s,color .18s;
}
.nav a:hover{color:var(--txt);transform:translateY(-1px);box-shadow:var(--sh-chip),0 0 0 1px var(--accent)}
/* home 連結的 petrol 色只在「非當前頁」時套用，避免蓋掉 active 白字 */
.nav a.home:not(.active){color:var(--accent)}
/* 當前頁 = DS 填色按鈕（170° 漸層 + 文字雕刻 + 方向性投影 + parchment 字） */
.nav a.active{
  color:var(--on-brand);border-color:transparent;font-weight:600;
  background-color:var(--accent-deep);
  background-image:linear-gradient(170deg,rgba(255,255,255,.10) 0%,transparent 50%,rgba(0,0,0,.10) 100%);
  text-shadow:0 1px 0 rgba(0,0,0,.55);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.10),inset 0 -1px 0 rgba(0,0,0,.10),3px 3px 3px var(--btn-drop),3px 3px 3px var(--btn-drop);
}
.nav a.active:hover{transform:translate(-1px,-2px);color:var(--on-brand);box-shadow:inset 0 1px 0 rgba(0,0,0,.10),inset 0 -1px 0 rgba(0,0,0,.10),4px 5px 4px var(--btn-drop),4px 5px 4px var(--btn-drop)}

/* ── 手機優先 RWD（≤600px） ── */
@media (max-width:600px){
  body{padding:14px 12px 28px}
  .theme-toggle{width:38px;height:38px;font-size:16px;top:10px;right:10px}
  .nav a{padding:6px 12px;font-size:12px}
}