/* ============================================================================
   深邃琥珀 (Deep Amber) 設計系統 — 主題 CSS 變數
   Light / Dark 雙主題 — 透過 data-theme 屬性切換
   
   ⚠️ 此檔案必須獨立於 Tailwind 處理流程，避免 CSS 變數被 PostCSS 靜態內聯
   ============================================================================ */

/* ============================================================================
   Light 主題（預設）
   ============================================================================ */

:root,
[data-theme="light"] {
  /* 背景色 — RGB 通道（供 Tailwind rgb() / <alpha-value> 使用） */
  --bg-primary: 254 252 249;        /* #FEFCF9 暖白 */
  --bg-secondary: 255 248 240;      /* #FFF8F0 極淡琥珀 */
  --bg-elevated: 255 255 255;       /* #FFFFFF 白 */

  /* 文字色 */
  --text-primary: 26 20 16;         /* #1A1410 深棕 */
  --text-secondary: rgba(26, 20, 16, 0.7);
  --text-muted: rgba(26, 20, 16, 0.5);
  --text-inverse: 254 243 226;      /* #FEF3E2 */

  /* 邊框色 — RGB 通道（支援 border-border/20 等 opacity modifier） */
  --border-rgb: 180 83 9;
  --border-hover: rgba(180, 83, 9, 0.3);
  --border-focus: #B45309;

  /* 卡片 */
  --card-bg: rgba(180, 83, 9, 0.06);
  --card-border: rgba(180, 83, 9, 0.15);
  --card-hover-border: rgba(180, 83, 9, 0.3);
  --card-hover-shadow: 0 8px 32px rgba(180, 83, 9, 0.1);

  /* 輸入框 */
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(180, 83, 9, 0.15);

  /* 玻璃效果 */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(180, 83, 9, 0.1);

  /* 按鈕 */
  --btn-secondary-bg: rgba(180, 83, 9, 0.1);
  --btn-secondary-hover: rgba(180, 83, 9, 0.18);
  --btn-ghost-border: rgba(180, 83, 9, 0.15);
  --btn-ghost-hover-bg: rgba(180, 83, 9, 0.08);
  --btn-ghost-hover-border: rgba(180, 83, 9, 0.3);

  /* 光暈 */
  --glow-shadow: 0 4px 20px rgba(180, 83, 9, 0.25);
  --glow-hover-shadow: 0 0 30px rgba(180, 83, 9, 0.35);

  /* 滾動條 */
  --scrollbar-track: #F5F5F4;
  --scrollbar-thumb: rgba(180, 83, 9, 0.2);
  --scrollbar-thumb-hover: rgba(180, 83, 9, 0.4);

  /* 選取色 */
  --selection-bg: rgba(180, 83, 9, 0.2);
  --selection-color: #1A1410;

  /* 原生 select */
  --select-bg: #FFFFFF;
  --select-color: #1A1410;

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

  /* Badge muted */
  --badge-muted-bg: rgba(26, 20, 16, 0.08);

  /* 白色按鈕 */
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #1A1410;
  --btn-white-hover-bg: #FEF7ED;
}

/* ============================================================================
   Dark 主題
   ============================================================================ */

[data-theme="dark"] {
  /* 背景色 */
  --bg-primary: 10 7 5;             /* #0A0705 */
  --bg-secondary: 17 13 8;          /* #110D08 */
  --bg-elevated: 26 20 16;          /* #1A1410 */

  /* 文字色 */
  --text-primary: 254 243 226;      /* #FEF3E2 */
  --text-secondary: rgba(254, 243, 226, 0.7);
  --text-muted: rgba(254, 243, 226, 0.5);
  --text-inverse: 10 7 5;           /* #0A0705 */

  /* 邊框色 */
  --border-rgb: 180 83 9;
  --border-hover: rgba(180, 83, 9, 0.35);
  --border-focus: #B45309;

  /* 卡片 */
  --card-bg: rgba(180, 83, 9, 0.08);
  --card-border: rgba(180, 83, 9, 0.2);
  --card-hover-border: rgba(180, 83, 9, 0.35);
  --card-hover-shadow: 0 8px 32px rgba(180, 83, 9, 0.15);

  /* 輸入框 */
  --input-bg: rgba(255, 255, 255, 0.05);
  --input-border: rgba(180, 83, 9, 0.2);

  /* 玻璃效果 */
  --glass-bg: rgba(10, 7, 5, 0.8);
  --glass-border: rgba(180, 83, 9, 0.15);

  /* 按鈕 */
  --btn-secondary-bg: rgba(180, 83, 9, 0.15);
  --btn-secondary-hover: rgba(180, 83, 9, 0.25);
  --btn-ghost-border: rgba(180, 83, 9, 0.2);
  --btn-ghost-hover-bg: rgba(180, 83, 9, 0.1);
  --btn-ghost-hover-border: rgba(180, 83, 9, 0.35);

  /* 光暈 */
  --glow-shadow: 0 4px 20px rgba(180, 83, 9, 0.4);
  --glow-hover-shadow: 0 0 30px rgba(180, 83, 9, 0.5);

  /* 滾動條 */
  --scrollbar-track: #110D08;
  --scrollbar-thumb: rgba(180, 83, 9, 0.3);
  --scrollbar-thumb-hover: rgba(180, 83, 9, 0.5);

  /* 選取色 */
  --selection-bg: rgba(180, 83, 9, 0.3);
  --selection-color: #FEF3E2;

  /* 原生 select */
  --select-bg: #1A1108;
  --select-color: #FEF3E2;

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

  /* Badge muted */
  --badge-muted-bg: rgba(254, 243, 226, 0.08);

  /* 白色按鈕 */
  --btn-white-bg: #FFFFFF;
  --btn-white-color: #0A0705;
  --btn-white-hover-bg: #FEF7ED;
}