/* =====================================================
   忠台AI智能客服 - 樣式設定檔
   修改這裡可以調整所有顏色、大小、字體
   ===================================================== */

:root {

  /* ──────────────────────────────
     品牌主色（深夜藍黑賽博）
  ────────────────────────────── */
  --color-dark:      #050d1a;   /* 深藍黑背景 */
  --color-dark2:     #030810;   /* 深藍黑漸層第二色 */
  --color-accent:    #00aaff;   /* 霓虹藍（按鈕、連結、重點） */
  --color-accent2:   #0077cc;   /* 霓虹藍 hover 狀態 */
  --color-teal:      #aa00ff;   /* 霓虹紫（副色調） */
  --color-light-bg:  #050d1a;   /* 頁面深藍黑背景 */
  --color-white:     #ffffff;   /* 白色 */
  --color-border:    #0a2040;   /* 邊框顏色（帶藍調） */

  /* ──────────────────────────────
     文字顏色
  ────────────────────────────── */
  --color-text:      #e0eeff;   /* 主要文字顏色（偏冷白） */
  --color-muted:     #7090b0;   /* 次要文字 */
  --color-muted2:    #506070;   /* 更淡的說明文字 */

  /* ──────────────────────────────
     字體
  ────────────────────────────── */
  --font-sans:   'Noto Sans TC', sans-serif;    /* 一般文字字體 */
  --font-serif:  'Noto Serif TC', serif;        /* 標題字體 */

  /* ──────────────────────────────
     字體大小
  ────────────────────────────── */
  --text-xs:    0.75rem;    /* 極小字（標籤、版權） */
  --text-sm:    0.875rem;   /* 小字（備註、說明） */
  --text-base:  1rem;       /* 基本大小 */
  --text-lg:    1.125rem;   /* 稍大 */
  --text-xl:    1.25rem;    /* 小標題 */
  --text-2xl:   1.5rem;     /* 中標題 */
  --text-3xl:   1.875rem;   /* 大標題 */
  --text-4xl:   2.25rem;    /* Hero 標題 */
  --text-5xl:   3rem;       /* Hero 超大標題 */

  /* ──────────────────────────────
     圓角大小
  ────────────────────────────── */
  --radius-sm:   6px;    /* 小圓角（輸入框、小按鈕） */
  --radius-md:   10px;   /* 中圓角（卡片） */
  --radius-lg:   16px;   /* 大圓角（大卡片） */
  --radius-full: 999px;  /* 完全圓角（標籤、膠囊按鈕） */

  /* ──────────────────────────────
     間距（內距/外距）
  ────────────────────────────── */
  --space-xs:   0.5rem;    /* 極小間距 */
  --space-sm:   0.75rem;   /* 小間距 */
  --space-md:   1rem;      /* 中間距 */
  --space-lg:   1.5rem;    /* 大間距 */
  --space-xl:   2rem;      /* 較大間距 */
  --space-2xl:  3rem;      /* 大區塊間距 */
  --space-3xl:  5rem;      /* 各區塊上下間距 */

  /* ──────────────────────────────
     版面寬度
  ────────────────────────────── */
  --max-width:        1100px;   /* 頁面最大寬度 */
  --sidebar-width:    240px;    /* 左側選單寬度（後台用） */

  /* ──────────────────────────────
     陰影
  ────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08);             /* 輕微陰影 */
  --shadow-md:  0 4px 12px rgba(0,0,0,0.1);             /* 中等陰影（卡片） */
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.15);            /* 較重陰影（彈窗） */
  --shadow-btn: 0 4px 16px rgba(37,99,235,0.35);        /* 藍色按鈕陰影 */

  /* ──────────────────────────────
     區塊背景（深淺交替）
  ────────────────────────────── */
  --color-bg-primary:   #0d0014;   /* 主要區塊背景 */
  --color-bg-secondary: #160020;   /* 次要區塊背景（交替用） */
  --color-bg-highlight: #1e0030;   /* 強調區塊背景（推薦卡片等） */
  --color-border-soft:  #3a0055;   /* 柔和邊框 */

  /* ──────────────────────────────
     Widget 聊天框（固定深色，不跟風格變）
  ────────────────────────────── */
  --widget-msg-bot-bg:    #f1f5f9;  /* 機器人訊息背景 */
  --widget-msg-bot-color: #1a1a2e;  /* 機器人訊息文字 */
  --widget-msg-typing:    #94a3b8;  /* 輸入中文字 */
  --widget-send-disabled: #93c5fd;  /* 發送按鈕停用色 */
  --logo-height:        50px;   /* 導覽列 Logo 高度 */
  --logo-height-footer: 40px;   /* 頁尾 Logo 高度 */

  /* ──────────────────────────────
     導覽列
  ────────────────────────────── */
  --nav-height:    70px;    /* 導覽列高度 */
  --nav-bg:        #050d1a; /* 導覽列背景色 */

  /* ──────────────────────────────
     Hero 區塊（首頁大圖區）
  ────────────────────────────── */
  --hero-padding-y:  6rem;   /* Hero 上下內距 */

  /* ──────────────────────────────
     卡片
  ────────────────────────────── */
  --card-padding:  1.75rem;   /* 卡片內距 */
  --card-bg:       #080f20;   /* 卡片背景色 */

  /* ──────────────────────────────
     按鈕
  ────────────────────────────── */
  --btn-padding:   0.7rem 1.75rem;   /* 按鈕內距（上下 左右） */
  --btn-font-size: 0.95rem;          /* 按鈕文字大小 */

  /* ──────────────────────────────
     區塊背景（深淺交替）
  ────────────────────────────── */
  --color-bg-primary:   #050d1a;   /* 主要區塊背景 */
  --color-bg-secondary: #080f20;   /* 次要區塊背景（交替用） */
  --color-bg-highlight: #0a1530;   /* 強調區塊背景（推薦卡片等） */
  --color-border-soft:  #0a2040;   /* 柔和邊框 */

  /* ──────────────────────────────
     Widget 聊天框（固定深色，不跟風格變）
  ────────────────────────────── */
  --widget-msg-bot-bg:    #0d1a2e;  /* 機器人訊息背景 */
  --widget-msg-bot-color: #e0eeff;  /* 機器人訊息文字 */
  --widget-msg-typing:    #5080a0;  /* 輸入中文字 */
  --widget-send-disabled: #0055aa;  /* 發送按鈕停用色 */

}