/* ============================================================================
   森林金箔 (Forest & Gilt) 設計系統 — 主題 CSS 變數
   對齊 react-app（Flash Falcon / Prepoe 商城）色票：森林綠 / 米白 / 金箔 / 陶土
   Light / Dark 雙主題 — 透過 data-theme 屬性切換

   ⚠️ 此檔案必須獨立於 Tailwind 處理流程，避免 CSS 變數被 PostCSS 靜態內聯

   品牌色參考（與 react-app prepoe.css 一致）：
     ink #17211E · forest #234F43 · moss #356656 · sage #A9B9AE · lichen #C8D4CB
     cream #FAF1E8 · bone #FBF7EC · parchment #E5D8BE
     gilt #D8B684 · gilt-deep #B67A31 · gilt-soft #E9D3AD · clay #A8543E
   ============================================================================ */

/* ============================================================================
   Light 主題（預設）— 溫暖米白 + 森林綠，對齊 react-app 商城日間風
   ============================================================================ */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* 背景色 — RGB 通道（供 Tailwind rgb() / <alpha-value> 使用） */
  --bg-primary: 250 241 232;        /* #FAF1E8 米白 cream */
  --bg-secondary: 245 237 225;      /* #EFE6D2 米白 2（側欄／區塊底） */
  --bg-tertiary: 234 226 214;       /* #E7DFCD 淺羊皮紙（軌道／hover 底） */
  --bg-elevated: 255 252 247;       /* #FBF7EC 骨白（卡片浮起層） */

  /* 文字色 */
  --text-primary: 23 33 30;         /* #17211E 森林墨 */
  --text-secondary: rgba(20, 35, 28, 0.7);
  --text-muted: rgba(20, 35, 28, 0.5);
  --text-inverse: 250 241 232;      /* #FAF1E8 */

  /* 邊框色 — RGB 通道（支援 border-border/20 等 opacity modifier） */
  --border-rgb: 35 79 67;           /* #234F43 forest */
  --border-hover: rgba(30, 58, 47, 0.3);
  --border-focus: #234F43;

  /* 卡片 — 骨白實底，浮於米白頁面 */
  --card-bg: #FBF7EC;
  --card-border: rgba(30, 58, 47, 0.12);
  --card-hover-border: rgba(30, 58, 47, 0.28);
  --card-hover-shadow: 0 8px 24px rgba(20, 35, 28, 0.10), 0 2px 6px rgba(20, 35, 28, 0.06);

  /* 輸入框 */
  --input-bg: rgba(30, 58, 47, 0.04);
  --input-border: rgba(30, 58, 47, 0.15);

  /* 玻璃效果 — 骨白霧面 */
  --glass-bg: rgba(251, 247, 236, 0.85);
  --glass-border: rgba(30, 58, 47, 0.1);

  /* 按鈕 */
  --btn-secondary-bg: rgba(30, 58, 47, 0.08);
  --btn-secondary-hover: rgba(30, 58, 47, 0.16);
  --btn-ghost-border: rgba(30, 58, 47, 0.15);
  --btn-ghost-hover-bg: rgba(30, 58, 47, 0.06);
  --btn-ghost-hover-border: rgba(30, 58, 47, 0.3);

  /* 光暈 — 暖墨森林調 */
  --glow-shadow: 0 4px 20px rgba(30, 58, 47, 0.22);
  --glow-hover-shadow: 0 0 30px rgba(30, 58, 47, 0.3);

  /* 滾動條 */
  --scrollbar-track: #EFE6D2;
  --scrollbar-thumb: rgba(30, 58, 47, 0.2);
  --scrollbar-thumb-hover: rgba(30, 58, 47, 0.4);

  /* 選取色 — 金箔高光 */
  --selection-bg: rgba(216, 182, 132, 0.35);
  --selection-color: #17211E;

  /* 原生 select（與主背景一致） */
  --select-bg: rgb(251, 247, 236);
  --select-color: #17211E;

  /* Ring offset（focus-visible） */
  --ring-offset-color: #FAF1E8;

  /* Badge muted */
  --badge-muted-bg: rgba(20, 35, 28, 0.08);

  /* 白色按鈕 */
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #17211E;
  --btn-white-hover-bg: #FAF1E8;
}

/* ============================================================================
   Dark 主題 — 森林墨夜間風
   ============================================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  /* 背景色 — 暖中性深色（降綠飽和、層次分明），森林綠只當點綴 */
  --bg-primary: 14 18 16;           /* #0E1210 近中性深墨 */
  --bg-secondary: 21 28 24;         /* #151C18 側欄 */
  --bg-tertiary: 34 43 37;          /* #222B25 軌道／hover */
  --bg-elevated: 27 35 30;          /* #1B231E 卡片浮起層（明顯高於頁面） */

  /* 文字色 — 提高可讀對比 */
  --text-primary: 250 241 232;      /* #FAF1E8 米白 */
  --text-secondary: rgba(246, 239, 225, 0.74);
  --text-muted: rgba(246, 239, 225, 0.56);
  --text-inverse: 14 18 16;         /* #0E1210 */

  /* 邊框色 — 米白／苔蘚色（分隔線更明顯） */
  --border-rgb: 124 146 133;        /* #7C9285 sage */
  --border-hover: rgba(246, 239, 225, 0.35);
  --border-focus: #D8B684;

  /* 卡片 */
  --card-bg: #1B231E;
  --card-border: rgba(246, 239, 225, 0.12);
  --card-hover-border: rgba(246, 239, 225, 0.3);
  --card-hover-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

  /* 輸入框 — 略提亮、邊框更清楚，避免綠底吃字 */
  --input-bg: rgba(246, 239, 225, 0.06);
  --input-border: rgba(246, 239, 225, 0.2);

  /* 玻璃效果 */
  --glass-bg: rgba(14, 18, 16, 0.82);
  --glass-border: rgba(246, 239, 225, 0.14);

  /* 按鈕 */
  --btn-secondary-bg: rgba(246, 239, 225, 0.1);
  --btn-secondary-hover: rgba(246, 239, 225, 0.18);
  --btn-ghost-border: rgba(246, 239, 225, 0.18);
  --btn-ghost-hover-bg: rgba(246, 239, 225, 0.08);
  --btn-ghost-hover-border: rgba(246, 239, 225, 0.32);

  /* 光暈 — 金箔調 */
  --glow-shadow: 0 4px 20px rgba(216, 182, 132, 0.3);
  --glow-hover-shadow: 0 0 30px rgba(216, 182, 132, 0.4);

  /* 滾動條 */
  --scrollbar-track: #151C18;
  --scrollbar-thumb: rgba(246, 239, 225, 0.2);
  --scrollbar-thumb-hover: rgba(246, 239, 225, 0.38);

  /* 選取色 */
  --selection-bg: rgba(216, 182, 132, 0.4);
  --selection-color: #FAF1E8;

  /* 原生 select（與 elevated 背景一致） */
  --select-bg: rgb(27, 35, 30);
  --select-color: #FAF1E8;

  /* Ring offset */
  --ring-offset-color: #0E1210;

  /* Badge muted */
  --badge-muted-bg: rgba(246, 239, 225, 0.08);

  /* 白色按鈕 */
  --btn-white-bg: #FAF1E8;
  --btn-white-color: #17211E;
  --btn-white-hover-bg: #FBF7EC;
}