/* ---------- 系統字型堆疊（移除 Google Fonts 外部依賴：速度+隱私；Thai 跨平台 fallback） ---------- */
:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans Thai", "IBM Plex Sans Thai", "Sarabun", "Leelawadee UI", "Thonburi", Tahoma, sans-serif;
}
html, body{ font-family: var(--font-sans); }
button, input, select, textarea{ font-family: var(--font-sans); }

/* ============================================================
   Sikadeer — Dark Mode 疊加層 (retrofit)
   作法：light 永遠是預設；使用者點 ☾ 才進 dark。
   用 html[data-theme="dark"] 提高 specificity 蓋掉 Tailwind 單一 class。
   品牌綠 / 橘 / 紅 與 footer 維持固定，不跟著變淺。
   ============================================================ */

:root{
  --c-bg:        #fafafa;
  --c-bg-soft:   #f5f5f5;
  --c-surface:   #ffffff;
  --c-surface-2: #ffffff;
  --c-border:    #e0e0e0;
  --c-text:      #212121;
  --c-text-2:    #616161;
  --c-text-3:    #999999;
  --c-green:     #1b5e20;
  --c-green-soft: rgba(27,94,32,.06);
}

html[data-theme="dark"]{
  color-scheme: dark;
  --c-bg:        #0e1511;
  --c-bg-soft:   #131c17;
  --c-surface:   #18211b;
  --c-surface-2: #202b24;
  --c-border:    #2c3a31;
  --c-text:      #e7efe9;
  --c-text-2:    #aebcb2;
  --c-text-3:    #8a9a90;
  --c-green:     #5fc06b;          /* 深底上可讀的亮綠，僅用於文字/連結 */
  --c-green-soft: rgba(95,192,107,.13);
}

/* ---------- 全域底色 ---------- */
html[data-theme="dark"] body{ background-color: var(--c-bg); color: var(--c-text); }

/* ---------- 表面 / 卡片 ---------- */
html[data-theme="dark"] .bg-white{ background-color: var(--c-surface); }
html[data-theme="dark"] .bg-gray-50{ background-color: var(--c-bg); }
html[data-theme="dark"] .bg-gray-100{ background-color: var(--c-bg-soft); }
html[data-theme="dark"] .bg-bg-soft{ background-color: var(--c-bg-soft); }
html[data-theme="dark"] .bg-surface{ background-color: var(--c-surface); }

/* 半透明 header（bg-white/95 + 模糊） */
html[data-theme="dark"] header.bg-white\/95,
html[data-theme="dark"] .bg-white\/95{ background-color: rgba(24,33,27,.90); }

/* ---------- 文字 ---------- */
html[data-theme="dark"] .text-text-primary,
html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800{ color: var(--c-text); }
html[data-theme="dark"] .text-text-secondary,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500{ color: var(--c-text-2); }
html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-300{ color: var(--c-text-3); }

/* 全域標題（h1–h6 有全域 color:#212121，需提亮） */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6{ color: var(--c-text); }

/* 品牌綠文字/連結（active nav、價格、強調）在深底要提亮 */
html[data-theme="dark"] .text-primary{ color: var(--c-green); }

/* 保護白字：綠底/深底上刻意用白的文字維持純白（specificity 高於上面標題規則） */
html[data-theme="dark"] .text-white{ color: #ffffff; }

/* ---------- 邊框 ---------- */
html[data-theme="dark"] .border-border,
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300{ border-color: var(--c-border); }

/* ---------- 品牌綠淡底（CTA 區塊、淺綠 box） ---------- */
html[data-theme="dark"] .bg-primary\/5{ background-color: var(--c-green-soft); }
html[data-theme="dark"] .bg-primary\/10{ background-color: var(--c-green-soft); }
html[data-theme="dark"] .border-primary\/20{ border-color: rgba(95,192,107,.3); }
html[data-theme="dark"] .badge-nutrition{ background-color: rgba(95,192,107,.16); color: var(--c-green); }

/* ---------- hover ---------- */
html[data-theme="dark"] .hover\:bg-gray-50:hover{ background-color: var(--c-bg-soft); }
html[data-theme="dark"] .hover\:bg-gray-100:hover{ background-color: var(--c-surface-2); }
html[data-theme="dark"] .hover\:bg-primary\/5:hover{ background-color: var(--c-green-soft); }
html[data-theme="dark"] .hover\:border-primary\/40:hover{ border-color: rgba(95,192,107,.4); }

/* ---------- 陰影在深底改為淡邊，避免「飄白」 ---------- */
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-md,
html[data-theme="dark"] .shadow-lg{ box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 0 1px var(--c-border); }

/* ---------- 固定深色區塊：保持原樣，不覆寫 ---------- */
/* footer (bg-gray-900 / gray-800)、stats bar (bg-primary 綠)、hero、CTA 綠帶 */
/* 這些刻意不寫規則，維持品牌深色感 */

/* ---------- 主題切換鈕 ---------- */
#theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--c-border); background:transparent;
  color: var(--c-text-2); cursor:pointer; transition: background .18s, color .18s;
  flex-shrink:0;
}
#theme-toggle:hover{ background: var(--c-bg-soft); color: var(--c-text); }
#theme-toggle .ico-sun{ display:none; }
#theme-toggle .ico-moon{ display:block; }
html[data-theme="dark"] #theme-toggle .ico-sun{ display:block; }
html[data-theme="dark"] #theme-toggle .ico-moon{ display:none; }

/* ---------- 工具頁（calculator / food-finder）：深底浮淺卡 ---------- */
/* 兩支 Preact 面板維持淺色（白卡深字，保證可讀），只把頁面四周轉深 */
html[data-theme="dark"] .tool-page-bg{ background-color: var(--c-bg); }