/* ==========================================================================
   Grovyn 五感體驗 · 深色模式（sensory-dark.css）
   載入條件：五感/預約頁（grovyn_is_sensory_page），由 team lead 統一 enqueue
   對應規格：docs/superpowers/specs/2026-05-25-darkmode-contract.md v1
   ========================================================================== */

/* === 深色 token 翻轉層（navy 統一，與部落格一致）=== */
body.grovyn-dark-mode {
  --ts-bg:            #282C3C;            /* 頁面底 navy */
  --ts-bg-alt:        #2F371F;            /* 次區塊 forest-deep */
  --ts-surface:       #1E2231;            /* 卡片/輸入框略深 */
  --ts-fg:            #EEEAE7;            /* 主文字 cream */
  --ts-fg-muted:      rgba(238,234,231,.62);
  --ts-border:        rgba(238,234,231,.12);
  --ts-border-strong: rgba(238,234,231,.24);
}

/* ============================================================
   §1 · 毛玻璃 — 米白玻璃 → navy 毛玻璃（最顯眼，優先）
   ============================================================ */

/* .ts-subnav：sensory-detail.css L265 rgba(238,234,231,.85) */
body.grovyn-dark-mode .ts-subnav {
  background: rgba(30, 34, 49, 0.88);
  backdrop-filter: blur(12px);
  border-block-end-color: var(--ts-border);
}

/* .ts-anchor-cta__price-strip：sensory-modules.css L273 rgba(238,234,231,.5) */
body.grovyn-dark-mode .ts-anchor-cta__price-strip {
  background: rgba(30, 34, 49, 0.75);
  backdrop-filter: blur(8px);
  border-color: var(--ts-border);
}

/* ============================================================
   §2 · Hero 區域背景翻轉（cream 底 → navy）
   ============================================================ */

/* .ts-hero-a：sensory-core.css L118 radial + var(--ts-cream) 底，降光暈透明度 */
body.grovyn-dark-mode .ts-hero-a {
  background:
    radial-gradient(80% 60% at 80% 0%, rgba(237, 205, 194, 0.08), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(163, 172, 153, 0.1), transparent 60%),
    var(--ts-bg);
}

/* .ts-hero-b：sensory-core.css L200 var(--ts-cream) 純底 */
body.grovyn-dark-mode .ts-hero-b {
  background: var(--ts-bg);
}

/* .ts-detail-hero：sensory-detail.css L13 var(--ts-cream) 底 */
body.grovyn-dark-mode .ts-detail-hero {
  background: var(--ts-bg);
}

/* .ts-anchor-cta：sensory-modules.css L207 radial + var(--ts-cream) 底 */
body.grovyn-dark-mode .ts-anchor-cta {
  background:
    radial-gradient(50% 80% at 30% 10%, rgba(237, 205, 194, 0.06), transparent 60%),
    radial-gradient(60% 80% at 100% 100%, rgba(163, 172, 153, 0.06), transparent 60%),
    var(--ts-bg);
  border-color: var(--ts-border);
}

/* ============================================================
   §3 · 卡片/區塊群背景翻轉（cream → surface）
   ============================================================ */

/* .ts-benefit：sensory-core.css L246 */
body.grovyn-dark-mode .ts-benefit {
  background: var(--ts-surface);
  border-color: var(--ts-border);
}

/* .ts-decision__card：sensory-detail.css L483 */
body.grovyn-dark-mode .ts-decision__card {
  background: var(--ts-surface);
  border-color: var(--ts-border-strong);
}

/* .ts-sense-map__cell：sensory-detail.css L364 */
body.grovyn-dark-mode .ts-sense-map__cell {
  background: var(--ts-surface);
}

/* .ts-comp__col--not（Not 欄）：sensory-detail.css L609 */
body.grovyn-dark-mode .ts-comp__col--not {
  background: var(--ts-surface);
  border-color: var(--ts-border);
}

/* .ts-modal：sensory-components.css L142 */
body.grovyn-dark-mode .ts-modal {
  background: var(--ts-surface);
}

/* .ts-modal__header：sensory-components.css L190 */
body.grovyn-dark-mode .ts-modal__header {
  background: var(--ts-surface);
  border-block-end-color: var(--ts-border);
}

/* .ts-modal__footer：sensory-components.css L235 */
body.grovyn-dark-mode .ts-modal__footer {
  background: var(--ts-surface);
  border-block-start-color: var(--ts-border);
}

/* .ts-detail-bar（右側 sticky 浮卡）：sensory-components.css L723 */
body.grovyn-dark-mode .ts-detail-bar {
  background: var(--ts-surface);
  border-color: var(--ts-border);
}

/* .ts-process__step（流程步驟卡）：sensory-components.css L768 */
body.grovyn-dark-mode .ts-process__step {
  background: var(--ts-surface);
  border-color: var(--ts-border);
}

/* .ts-hero-meta__chip（詳情 badge）：sensory-modules.css L19 */
body.grovyn-dark-mode .ts-hero-meta__chip {
  background: var(--ts-surface);
  border-color: var(--ts-border-strong);
}

/* .ts-suit__col（適合/不適合欄）：sensory-modules.css L49 */
body.grovyn-dark-mode .ts-suit__col {
  background: var(--ts-surface);
  border-color: var(--ts-border-strong);
}

/* .ts-logo-wall__cell：sensory-components.css L700 var(--ts-cream-tint) */
body.grovyn-dark-mode .ts-logo-wall__cell {
  background: var(--ts-surface);
  border-color: var(--ts-border);
}
body.grovyn-dark-mode .ts-logo-wall__cell:hover {
  background: var(--ts-bg-alt);
  border-color: var(--ts-sun);
}

/* .ts-card__media（課程卡片媒體占位）：sensory-components.css L22 */
body.grovyn-dark-mode .ts-card__media {
  background: var(--ts-surface);
}

/* ============================================================
   §4 · Warm 底翻轉（warm → bg-alt）
   ============================================================ */

/* .ts-case__metric（案例指標卡）：sensory-core.css L318 */
body.grovyn-dark-mode .ts-case__metric {
  background: var(--ts-bg-alt);
}

/* .ts-overview__sci（科學實證框）：sensory-detail.css L80 */
body.grovyn-dark-mode .ts-overview__sci {
  background: var(--ts-bg-alt);
}

/* .ts-esg（ESG / 補助對應表）：sensory-detail.css L544 */
body.grovyn-dark-mode .ts-esg {
  background: var(--ts-bg-alt);
  border-color: var(--ts-border);
}

/* .ts-prepare（準備清單）：sensory-modules.css L112 */
body.grovyn-dark-mode .ts-prepare {
  background: var(--ts-bg-alt);
}

/* .ts-testimonial（見證輪播）：sensory-components.css L589 */
body.grovyn-dark-mode .ts-testimonial {
  background: var(--ts-bg-alt);
}

/* .ts-tag（chip 標籤）：sensory-base.css L295 */
body.grovyn-dark-mode .ts-tag {
  background: var(--ts-bg-alt);
}

/* ============================================================
   §5 · 互動 hover 狀態（warm hover → 深色 alpha）
   ============================================================ */

/* .ts-btn--ghost:hover：sensory-base.css L263 */
body.grovyn-dark-mode .ts-btn--ghost:hover {
  background: rgba(238,234,231,.07);
  border-color: var(--ts-sun);
}

/* .ts-modal__close:hover：sensory-components.css L217 */
body.grovyn-dark-mode .ts-modal__close:hover {
  background: rgba(238,234,231,.1);
}

/* .ts-subnav__item:hover：sensory-detail.css L286 */
body.grovyn-dark-mode .ts-subnav__item:hover {
  background: rgba(238,234,231,.08);
  color: var(--ts-fg);
}

/* .ts-sense-map__cell:hover：sensory-detail.css L372 */
body.grovyn-dark-mode .ts-sense-map__cell:hover {
  background: rgba(238,234,231,.07);
}

/* .ts-cal__nav button:hover：sensory-components.css L333 */
body.grovyn-dark-mode .ts-cal__nav button:hover {
  background: rgba(238,234,231,.09);
}

/* .ts-cal__day:hover：sensory-components.css L359 */
body.grovyn-dark-mode .ts-cal__day:hover:not(.is-disabled):not(.is-selected) {
  background: rgba(238,234,231,.09);
}

/* ============================================================
   §6 · 文字 / RGBA 翻轉
   ============================================================ */

/* Disabled 日期：rgba(40,44,60,.25) → rgba(238,234,231,.25) */
/* sensory-components.css L362 */
body.grovyn-dark-mode .ts-cal__day.is-disabled {
  color: rgba(238,234,231,.25);
}

/* Testimonial dots：rgba(40,44,60,.18) → rgba(238,234,231,.18) */
/* sensory-components.css L648 */
body.grovyn-dark-mode .ts-testimonial__dot {
  background: rgba(238,234,231,.18);
}

/* Peach tag：navy text + peach bg → fg text + 深色 peach（桃色 tile 避免亮塊）*/
/* sensory-base.css L308 .ts-tag--peach { color: var(--ts-navy); } */
body.grovyn-dark-mode .ts-tag--peach {
  background: #3a2e2a;
  color: var(--ts-fg);
}

/* ============================================================
   §7 · 輸入框 focus 狀態修正
   ============================================================ */

/* focus 時原本亮 cream 底 → 維持 surface 深色 */
/* sensory-components.css L270-275 .ts-field input:focus */
body.grovyn-dark-mode .ts-field input:focus,
body.grovyn-dark-mode .ts-field textarea:focus,
body.grovyn-dark-mode .ts-field select:focus {
  background: var(--ts-bg);
  border-color: var(--ts-sun);
}

/* Time range 滑軌 handle（cream 底）：sensory-components.css L435 */
body.grovyn-dark-mode .ts-time-range__handle {
  background: var(--ts-surface);
}

/* ============================================================
   §8 · 圖片佔位深色版（.ts-img-placeholder 亮底漸層 → 深色）
   ============================================================ */

/* 預設版：sensory-base.css L172 warm/moss/forest 亮底 → navy 深色漸層 */
body.grovyn-dark-mode .ts-img-placeholder {
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(163, 172, 153, 0.1), transparent 60%),
    radial-gradient(140% 100% at 80% 100%, rgba(73, 84, 52, 0.18), transparent 60%),
    linear-gradient(145deg, #282C3C 0%, #1E2A18 55%, #1C2319 110%);
}

/* --warm 變體：cream-tint → peach 亮底 → 深色暗調 */
body.grovyn-dark-mode .ts-img-placeholder--warm {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(185, 107, 77, 0.12), transparent 55%),
    linear-gradient(140deg, #282C3C 0%, #2F1E1A 60%, #1C2319 110%);
}

/* --moss 變體：moss/forest 亮底 → 深色（本身較深，微調即可）*/
body.grovyn-dark-mode .ts-img-placeholder--moss {
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(163, 172, 153, 0.08), transparent 60%),
    linear-gradient(160deg, #1E2A18 0%, #1A2218 110%);
}

/* ============================================================
   §9 · 不改的（記錄跳過理由）
   ============================================================
   .ts-cta                          → 森林綠底 + cream 字，深色仍可用
   .ts-cta .ts-btn--primary/ghost   → 在 CTA 綠底內，保持對比
   .ts-footer                       → navy 底，本就深色
   .ts-modal-backdrop               → rgba(40,44,60,.55) 遮罩，深色合理
   .ts-btn--primary                 → 森林綠底 + cream 字，不改
   .ts-img-placeholder--dark        → 已是 navy/forest 深色底
   .ts-subnav__item--active         → forest 底 + cream 字，深色仍可用
   .ts-comp__col--is                → forest 底 + cream 字，深色仍可用
   .ts-detail-bar--v2 scroll button → forest 底 + cream 字，深色仍可用
   ::selection                      → forest 底 + cream 字，維持品牌一致
   ============================================================ */

/* ============================================================
   預約感謝卡 深色 override（2026-05-26）
   semantic token（fg / fg-muted / border / moss）已自動翻；
   以下只處理「palette 直引當深底文字會消失」+ 卡片底 + QR 白底
   ============================================================ */
body.grovyn-dark-mode .ts-thx__card { background: #252A3A; border-color: rgba(238, 234, 231, 0.12); }
body.grovyn-dark-mode .ts-thx__ring { background: rgba(163, 172, 153, 0.16); }
body.grovyn-dark-mode .ts-thx__ring svg path { stroke: var(--ts-moss); }              /* 打勾改亮苔綠，深底才看得見 */
body.grovyn-dark-mode .ts-thx__title,
body.grovyn-dark-mode .ts-thx__ctitle { color: var(--ts-fg); }                        /* 標題改 cream，避免 forest 深綠消失 */
body.grovyn-dark-mode .ts-thx__card--member .ts-thx__tag { color: var(--ts-moss); }
body.grovyn-dark-mode .ts-thx__qr { background: #fff; border-color: rgba(238, 234, 231, 0.22); }  /* QR 必須留白底才掃得到 */
body.grovyn-dark-mode .ts-thx__btn--member { background: var(--ts-forest); color: var(--ts-cream); }
body.grovyn-dark-mode .ts-thx__foot-small a { color: var(--ts-moss); }
/* LINE 綠按鈕(#06C755)、hero 圖：品牌色 / 圖片，深淺一致不翻 */

/* ============================================================
   §10 · DK-01 fix：深色模式 forest 文字 → moss（WCAG AA）
   ============================================================
   問題：下列選擇器在亮色模式使用 color: var(--ts-forest)（#495434 深土綠）
         作為強調文字，落在深底（#282C3C / #1E2231）對比約 1.5-1.7:1，
         遠低於 WCAG AA 標準 4.5:1。
   修法：統一改為 color: var(--ts-moss)（#A3AC99 亮苔綠），
         對深底對比約 4.8:1，達 WCAG AA。
   注意：只 override 文字 color，不動 palette 變數定義（§5 #14 鐵則）。
   診斷來源：docs/diagnostics/2026-05-27-sensory-e2e/D4-responsive-dark-a11y-funnel.md § DK-01
   ============================================================ */
body.grovyn-dark-mode .ts-stat__num,
body.grovyn-dark-mode .ts-detail-bar__price,
body.grovyn-dark-mode .ts-hero-meta__chip strong,
body.grovyn-dark-mode .ts-anchor-cta__title em,
body.grovyn-dark-mode .ts-esg__cat,
body.grovyn-dark-mode .ts-esg__map strong,
body.grovyn-dark-mode .ts-overview__text strong,
body.grovyn-dark-mode .ts-philosophy__body em,
body.grovyn-dark-mode .ts-philosophy__body--editorial::first-letter,
body.grovyn-dark-mode .ts-journal__body strong,
body.grovyn-dark-mode .ts-detail-hero__tagline,
body.grovyn-dark-mode .ts-time-range__readout strong,
/* Hub Redesign §9 forest 文字 (Lead 部署後 Playwright 量測加入，2026-05-28) */
body.grovyn-dark-mode .ts-hubx__story-para em,
body.grovyn-dark-mode .ts-hubx__story-link a,
body.grovyn-dark-mode .ts-hubx__sense-title,
body.grovyn-dark-mode .ts-hubx__sense-course,
body.grovyn-dark-mode .ts-hubx__track-cta {
  color: var(--ts-cream); /* 去綠 2026-05-29（阿翰）：cream 對深底對比 > moss，無回歸 */
}
/* 例外（Lead 部署後 Playwright 實機驗證排除，2026-05-28）：
   .ts-sense-map__cell-zh（a1 五感地圖）與 .ts-decision__q em（b1 決策卡）位於淺米色卡片
   （#EEEAE7）內，深色模式下卡片背景不翻深 → 原 forest 深綠 on 淺底對比已達 ~6.8:1；
   若一併改 moss 反而降到 1.97:1（regression）。故排除，維持 forest。
   （D4 從 CSS 推斷其背景為深色 surface，與實機不符。） */

/* ============================================================
   §11 · 對比修正批次（2026-05-29）
   來源：render 實測（Playwright computed-color + canvas 取樣，截圖被 MCP 卡死改走量化）
   work-log：docs/work-logs/2026-05-29-sensory-contrast-and-image-system.md
   ============================================================ */

/* A1 — 深色標題隱形。根因：grovyn-overrides.css:50-54 全站 heading 寫死
   color:var(--ts-navy)，深色 --ts-navy 不翻 → 五感頁所有標題 navy-on-dark 隱形
   （實測 track-title / action-headline / action-card h3 / hero 大標 ratio 1.0~1.14）。
   不動全站那條，只 scope 五感區（.grovyn-sensory，5 頁都有）翻成 --ts-fg（深色=cream）。 */
body.grovyn-dark-mode .grovyn-sensory :is(h1, h2, h3, h4, h5, h6, [class*="title"], [class*="heading"]) {
  color: var(--ts-fg);
}

/* A2 — DK-01 漏網的 forest 強調文字 → moss（#A3AC99，深底 ~4.8:1 AA），延用 §10 模式。
   .ts-sense-map__cell-zh：§10 舊註解誤判為淺底而排除，但 §3（L84）已把 .ts-sense-map__cell
   翻成 surface 深底，render 實測 forest on #1E2231 = 1.96 FAIL → 此處納入修正（覆蓋舊判斷）。 */
body.grovyn-dark-mode .ts-hero-a__title-en,
body.grovyn-dark-mode .ts-benefit__stat,
body.grovyn-dark-mode .ts-benefit__icon,
body.grovyn-dark-mode .ts-anchor-cta__price-strip-value,
body.grovyn-dark-mode .ts-signoff__name,
body.grovyn-dark-mode .ts-philosophy__byline strong,
body.grovyn-dark-mode .ts-sechead__title em,
body.grovyn-dark-mode .ts-overview__sci-fact strong,
body.grovyn-dark-mode .ts-decision__a strong,
body.grovyn-dark-mode .ts-suit__col--yes .ts-suit__col-head-zh,
body.grovyn-dark-mode .ts-case__metric-after strong,
body.grovyn-dark-mode .ts-thanks__step-num,
body.grovyn-dark-mode .ts-logo-wall__cell:hover,
body.grovyn-dark-mode .ts-sense-map__cell-zh {
  color: var(--ts-cream);
}

/* A2-ext — b1/c1/c2 render 補漏（同 forest-on-dark）：
   無 class 連結（吃全站 a:not([class]) 的 forest）+ 額外 em / hover 強調文字。 */
body.grovyn-dark-mode .grovyn-sensory a:not([class]),
body.grovyn-dark-mode .ts-detail-hero__crumbs a:hover,
body.grovyn-dark-mode .ts-btn--quiet:hover,
body.grovyn-dark-mode .ts-hero-b__title em,
body.grovyn-dark-mode .ts-prepare__head em,
body.grovyn-dark-mode .ts-decision__q em,
body.grovyn-dark-mode .ts-sense-map__cell:hover .ts-sense-map__cell-link {
  color: var(--ts-cream);
}
/* 註：.ts-decision__q em 與 .ts-sense-map__cell-zh 原列 §10 例外（D4 推斷淺底），
   但 §3 已把 .ts-decision__card / .ts-sense-map__cell 翻成 surface 深底，render 實測
   forest on #1E2231 = 1.96 FAIL，故兩者皆改 moss（推翻舊例外判斷）。 */

/* A5b — landing 頁 lead 段落 / email 連結用 inline style「color: var(--ts-forest)」（共 5 處：
   b1:25 / c1:55,364 / c2:55,367），inline 優先級最高、外部 CSS 蓋不掉 →
   用 [style*] 精準命中 + !important 僅在深色強制 moss（淺色不動，仍 forest）。 */
body.grovyn-dark-mode .grovyn-sensory [style*="color: var(--ts-forest)"] {
  color: var(--ts-moss) !important;
}

/* A3 — .ts-tag--accent 深色 fg=bg 同色（forest-deep #2F371F）ratio 1.0 全隱形：
   字改 moss、底改深綠 chip（文字對 chip ~6.6:1 AA），補 border 讓 chip 在深底有輪廓。 */
body.grovyn-dark-mode .ts-tag--accent {
  color: var(--ts-sun); /* 去綠 2026-05-29：原深綠 chip 改暖色——晨光黃字 + 半透明 cream 底框 */
  background: rgba(238, 234, 231, 0.08);
  border: 1px solid rgba(238, 234, 231, 0.18);
}

/* A4 — accent-warm 萜烯橘文字共 13 處（.ts-eyebrow--accent / .ts-sechead__eyebrow /
   .ts-sense-map__cell-num / .ts-comp__col-eyebrow … 深底 3.13~3.97 不足）。
   翻 token 一次覆蓋全部 → #D4896A（~5.0:1 AA）。--ts-accent-warm 另只被 1 個 4px
   行事曆 dot 背景 + 1 個 border 用，變亮無害。 */
body.grovyn-dark-mode .grovyn-sensory {
  --ts-accent-warm: #D4896A;
}

/* ============================================================
   §12 · 深色去深綠 + 五感卡照片版（2026-05-29，阿翰）
   原則：深色模式文字一律 cream / 晨光黃 sun，全面棄用 moss 苔綠當文字色。
   cream(#EEEAE7) 與 sun(#EEE78D) 對深底對比皆遠高於 moss，無 WCAG 回歸。
   ============================================================ */
/* 關鍵連結 / CTA / 數據 → 晨光黃 sun（給品牌黃色 pop，對深底 ~13:1） */
body.grovyn-dark-mode .ts-hubx__story-link a,
body.grovyn-dark-mode .ts-hubx__sense-course,
body.grovyn-dark-mode .ts-hubx__track-cta,
body.grovyn-dark-mode .ts-stat__num,
body.grovyn-dark-mode .ts-benefit__stat,
body.grovyn-dark-mode .ts-detail-bar__price,
body.grovyn-dark-mode .ts-anchor-cta__price-strip-value {
  color: var(--ts-sun);
}
/* 五感卡註腳：原 fg-muted(#5A6172)+opacity .65 在深底幾乎隱形 → cream 半透明 + 去 opacity */
body.grovyn-dark-mode .ts-hubx__sense-foot {
  color: rgba(238, 234, 231, 0.62);
  opacity: 1;
  border-top-color: rgba(238, 234, 231, 0.14);
}
/* 五感卡說明文字確保 cream（深底 fg 已=cream，明示防呆） */
body.grovyn-dark-mode .ts-hubx__sense-mech { color: var(--ts-cream); }

/* 「我該選哪條」決策列：去綠——圖示 badge 改 cream-tint、課程膠囊字改晨光黃 */
body.grovyn-dark-mode .ts-hubx__decision-ico {
  background: rgba(238, 234, 231, 0.08);
  color: var(--ts-cream);
}
body.grovyn-dark-mode .ts-hubx__decision-track {
  color: var(--ts-sun);
  background: rgba(238, 234, 231, 0.05);
}
body.grovyn-dark-mode .ts-hubx__decision-item:hover {
  background: rgba(238, 234, 231, 0.05);
}