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

:root {

  /* ──────────────────────────────
     品牌主色
  ────────────────────────────── */
  --color-dark:      #1a1a2e;   /* 深色背景（頁頭、Hero區塊） */
  --color-dark2:     #16213e;   /* 深色背景漸層第二色 */
  --color-accent:    #2563eb;   /* 主要藍色（按鈕、連結、重點） */
  --color-accent2:   #1d4ed8;   /* 藍色按鈕 hover 狀態 */
  --color-teal:      #2dd4bf;   /* 青綠色（副色調、漸層用） */
  --color-light-bg:  #f8fafc;   /* 頁面淺色背景 */
  --color-white:     #ffffff;   /* 白色 */
  --color-border:    #e2e8f0;   /* 邊框顏色 */

  /* ──────────────────────────────
     文字顏色
  ────────────────────────────── */
  --color-text:      #1a1a2e;   /* 主要文字顏色 */
  --color-muted:     #4a5568;   /* 次要文字（說明文字） */
  --color-muted2:    #6b7280;   /* 更淡的說明文字 */

  /* ──────────────────────────────
     字體
  ────────────────────────────── */
  --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);        /* 藍色按鈕陰影 */

  /* ──────────────────────────────
     Logo 大小
  ────────────────────────────── */
  --logo-height:        50px;   /* 導覽列 Logo 高度 */
  --logo-height-footer: 40px;   /* 頁尾 Logo 高度 */

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

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

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

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

}