/* colors.css —— 全站色彩變數統一管理。
   之後想調整品牌顏色，只需要改這個檔案裡的數值，不需要一個一個檔案找色碼。
   這個檔案只放顏色變數，不放任何其他樣式規則。
   任務16最終定案版本：色碼已經套用到全站，這一版是使用者提供的冷色調（藍灰/深藍黑）新色號試搭。 */

:root{
  /* 品牌主色（Logo原色）：僅用於品牌識別相關元素，目前全站只有一處使用（首頁IG連結hover），不做按鈕填色。 */
  --color-brand: #686F12;

  /* 按鈕色：深藍灰，用於一般功能性按鈕/互動回饋，如尺寸選擇、輸出圖檔、選取框、功能面板等。
     跟--color-dark-base同色系但稍亮，刻意走低對比、沉穩內斂的路線（使用者要求先試試這個效果）。 */
  --color-primary-btn: #3D4354;
  --color-primary-btn-rgb: 61,67,84; /* 給需要調整透明度的地方用，例如 rgba(var(--color-primary-btn-rgb),0.85) */

  /* 深色底：側邊欄、彈窗等大面積深色區域。暖棕黑色（使用者指定）。
     ⚠️ 跟下面warning/primary-btn的對比度都偏低(1.4~1.7:1)，三個深色疊在一起可能不容易分辨誰是誰，
     尤其「清空畫布」這種破壞性操作按鈕，視覺上可能不夠跳出來、容易被忽略，先套用讓使用者實際看過再判斷。 */
  --color-dark-base: #291C1D;
  --color-dark-base-rgb: 41,28,29;

  /* 警示/強調色：只能用在破壞性操作（例如清空畫布）。深藍灰色。 */
  --color-warning: #343B3E;
  --color-warning-rgb: 52,59,62;

  /* 淺色文字/線條：取代原本的純白/米白文字。淺灰藍，疊在深色底上對比度足夠。 */
  --color-light-text: #8A939D;

  /* 淺色大面積背景：排版操作區、表單等淺色區塊背景。米灰白，這組色號裡唯一夠淺的顏色。 */
  --color-light-bg: #DCDCD1;

  /* 互動狀態色：選字格預設框線（常態顯示，非僅限hover/選中狀態），可延伸用於其他選中/游標提示情境。
     這組色號裡最鮮豔的一支鋼藍色，延續一直以來interactive都是藍色的慣例。 */
  --color-interactive: #4C65A8;

  /* 次要文字色：說明性質、非主要內容的小字（欄位提示、步驟指示、關閉按鈕預設色等）。
     灰褐色，色調跟前一版的次要文字色很接近，維持同樣「低調不搶戲」的調性。 */
  --color-muted-text: #919187;
}