:root {
  /* ==================== RWD 文字大小系統（9 級，最大值對齊 Tailwind）==================== */
  --fs-6xl: clamp(2.5rem, 7vw, 3.75rem); /* 40-60px → text-6xl */
  --fs-5xl: clamp(2.25rem, 6vw, 3rem); /* 36-48px → text-5xl */
  --fs-4xl: clamp(1.75rem, 5vw, 2.25rem); /* 28-36px → text-4xl */
  --fs-3xl: clamp(1.5rem, 4vw, 1.875rem); /* 24-30px → text-3xl */
  --fs-2xl: clamp(1.25rem, 3.5vw, 1.5rem); /* 20-24px → text-2xl */
  --fs-xl: clamp(1.125rem, 3vw, 1.25rem); /* 18-20px → text-xl */
  --fs-lg: clamp(1rem, 2.5vw, 1.125rem); /* 16-18px → text-lg */
  --fs-base: clamp(0.875rem, 1.8vw, 1rem); /* 14-16px → text-base */
  --fs-sm: clamp(0.8125rem, 1.5vw, 0.875rem); /* 13-14px → text-sm */
  --fs-xs: clamp(0.6875rem, 1.2vw, 0.75rem); /* 11-12px → text-xs */

  /* ==================== 特殊用途字型大小 ==================== */
  --fs-display: clamp(
    2.5rem,
    8vw,
    4.5rem
  ); /* 展示用大字 (40-72px) 跑馬燈、超大標題等 */

  /* ==================== 語意文字大小（Semantic Font Size）==================== */
  --font-size-display: var(--fs-display); /* 展示大字：跑馬燈、超大標題 */
  --font-size-heading-2xl: var(--fs-6xl); /* 巨型標題：最大號標題 */
  --font-size-heading-xl: var(
    --fs-5xl
  ); /* 超大標題：Landing Hero、首頁主視覺 */
  --font-size-heading-lg: var(--fs-4xl); /* 大標題：Hero 標題、頁尾主標題 */
  --font-size-heading-md: var(--fs-3xl); /* 中大標題：區塊主標、重點段落標題 */
  --font-size-heading: var(--fs-2xl); /* 標題（預設）：區塊標題、頁面標題 */
  --font-size-heading-sm: var(--fs-xl); /* 小標題：頁尾副標題、側邊欄標題 */
  --font-size-subheading: var(--fs-lg); /* 副標題：Hero 副標題、文章卡片標題 */
  --font-size-body: var(--fs-base); /* 內文：預設文字、卡片標題 */
  --font-size-caption: var(--fs-sm); /* 輔助說明：日期、摘要、版權 */
  --font-size-label: var(--fs-sm); /* 按鈕/標籤：按鈕文字、標籤文字 */
  --font-size-overline: var(--fs-xs); /* 極小輔助：日期年月 */

  /* ==================== 固定文字大小（元件用）==================== */
  --fs-fixed-xs: 0.75rem; /* 12px */
  --fs-fixed-sm: 0.875rem; /* 14px */
  --fs-fixed-base: 1rem; /* 16px */
  --fs-fixed-lg: 1.125rem; /* 18px */

  /* ==================== 字體系統 ====================
     中英混排策略：英文字體放前面、中文字體放後面
     瀏覽器逐字符 fallback：英文字符用 Inter、中文字符自動退到 Noto Sans TC
     ==================== */
  --font-family-sans:
    "Inter", "Noto Sans TC", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* ==================== 字重系統 (Google Fonts CDN 載入完整 100~900) ==================== */
  --fw-thin: 100; /* 極細裝飾 */
  --fw-extralight: 200; /* 極淡標題 */
  --fw-light: 300; /* 大標題、精緻風格 */
  --fw-regular: 400; /* 內文、一般文字 */
  --fw-medium: 500; /* 小標題、次強調 */
  --fw-semibold: 600; /* 中標、按鈕、標籤 */
  --fw-bold: 700; /* 重要標題、CTA */
  --fw-extrabold: 800; /* 強調展示 */
  --fw-black: 900; /* 極粗展示 */

  /* ==================== 基礎顏色 ==================== */
  --black: black;
  --white: white;
  --transparent: rgba(255, 255, 255, 0);

  /* ==================== 灰階色系（Tailwind neutral） ====================
     50~100 淺底色 ｜ 200~300 邊框 ｜ 400 次要 icon/placeholder
     500 基本值 → 600 hover → 700 active ｜ 800~950 深色文字/背景
     ★ 灰階額外承擔文字層：400 placeholder → 500 輔助 → 600 label
       → 700 正文 → 800/900 標題（詳見語意文字顏色區塊）
     無障礙：正文最低用 600（AA 5.7:1）、大字最低用 500（4.6:1）
     ==================== */
  --gray-50: #fafafa; /* 淺底色：頁面背景、交替列 */
  --gray-100: #f5f5f5; /* 淺底色：sidebar、下拉選單、tag 底色 */
  --gray-200: #e5e5e5; /* 邊框、分隔線 */
  --gray-300: #d4d4d4; /* 強調邊框：表單邊框、導覽分隔 */
  --gray-400: #a3a3a3; /* 次要 icon、placeholder */
  --gray-500: #737373; /* 基本值 */
  --gray-600: #525252; /* hover */
  --gray-700: #404040; /* active */
  --gray-800: #262626; /* 深色文字、深色區塊背景 */
  --gray-900: #171717; /* 極深文字、footer 背景 */
  --gray-950: #0a0a0a; /* 深色背景 */

  /* ==================== 藍色系 primary（Tailwind blue）====================
     按鈕互動：500（基底）→ 600（hover）→ 700（active）
     淺色底/邊框：50~200 ｜ 深色文字/背景：800~950
     ==================== */
  --blue-50: #eff6ff; /* 淺底色、alert 背景 */
  --blue-100: #dbeafe; /* badge 背景、選中列底色 */
  --blue-200: #bfdbfe; /* 淺邊框、focus ring */
  --blue-300: #93c5fd; /* 裝飾元素、進度條底色 */
  --blue-400: #60a5fa; /* 次要連結、icon */
  --blue-500: #3b82f6; /* 基本值：按鈕背景、連結色 */
  --blue-600: #2563eb; /* 按鈕 hover */
  --blue-700: #1d4ed8; /* 按鈕 active */
  --blue-800: #1e40af; /* 深色文字、強調標題 */
  --blue-900: #1e3a8a; /* 極深文字 */
  --blue-950: #172554; /* 深色區塊背景 */

  /* ==================== 灰色系 secondary（Tailwind slate）====================
     按鈕互動：500（基底）→ 600（hover）→ 700（active）
     帶藍調的灰，適合搭配 blue 做次要按鈕
     ==================== */
  --slate-50: #f8fafc; /* 頁面背景（偏冷） */
  --slate-100: #f1f5f9; /* 次級背景 */
  --slate-200: #e2e8f0; /* 邊框、分隔線 */
  --slate-300: #cbd5e1; /* 強調邊框 */
  --slate-400: #94a3b8; /* placeholder */
  --slate-500: #64748b; /* 基本值：次要按鈕背景 */
  --slate-600: #475569; /* 按鈕 hover */
  --slate-700: #334155; /* 按鈕 active */
  --slate-800: #1e293b; /* 深色背景 */
  --slate-900: #0f172a; /* 極深背景 */
  --slate-950: #020617; /* 最深底層 */

  /* ==================== 綠色系 success（Tailwind emerald）====================
     按鈕互動：500（基底）→ 600（hover）→ 700（active）
     成功狀態、確認操作、正向回饋
     ==================== */
  --green-50: #ecfdf5; /* 成功 alert 背景 */
  --green-100: #d1fae5; /* 成功 badge 背景 */
  --green-200: #a7f3d0; /* 淺邊框 */
  --green-300: #6ee7b7; /* 裝飾、圖表 */
  --green-400: #34d399; /* 次要 icon */
  --green-500: #10b981; /* 基本值：成功按鈕、狀態標記 */
  --green-600: #059669; /* 按鈕 hover */
  --green-700: #047857; /* 按鈕 active */
  --green-800: #065f46; /* 深色文字 */
  --green-900: #064e3b; /* 極深文字 */
  --green-950: #022c22; /* 深色背景 */

  /* ==================== 紅色系 danger（Tailwind red）====================
     按鈕互動：500（基底）→ 600（hover）→ 700（active）
     錯誤狀態、刪除操作、警告回饋
     ==================== */
  --red-50: #fef2f2; /* 錯誤 alert 背景 */
  --red-100: #fee2e2; /* 錯誤 badge 背景 */
  --red-200: #fecaca; /* 淺邊框 */
  --red-300: #fca5a5; /* 裝飾元素 */
  --red-400: #f87171; /* 次要 icon */
  --red-500: #ef4444; /* 基本值：危險按鈕、錯誤標記 */
  --red-600: #dc2626; /* 按鈕 hover */
  --red-700: #b91c1c; /* 按鈕 active */
  --red-800: #991b1b; /* 深色文字 */
  --red-900: #7f1d1d; /* 極深文字 */
  --red-950: #450a0a; /* 深色背景 */

  /* ==================== 琥珀色系 warning（Tailwind amber）====================
     按鈕互動：500（基底）→ 600（hover）→ 700（active）
     警告狀態、需注意的提示（淺色底搭深色文字）
     ==================== */
  --amber-50: #fffbeb; /* 警告 alert 背景 */
  --amber-100: #fef3c7; /* 警告 badge 背景 */
  --amber-200: #fde68a; /* 淺邊框 */
  --amber-300: #fcd34d; /* 裝飾、星級 */
  --amber-400: #fbbf24; /* 次要 icon */
  --amber-500: #f59e0b; /* 基本值：警告按鈕（搭深色文字） */
  --amber-600: #d97706; /* 按鈕 hover */
  --amber-700: #b45309; /* 按鈕 active */
  --amber-800: #92400e; /* 深色文字 */
  --amber-900: #78350f; /* 極深文字 */
  --amber-950: #451a03; /* 深色背景 */

  /* ==================== 青色系 info（Tailwind cyan）====================
     按鈕互動：500（基底）→ 600（hover）→ 700（active）
     資訊提示、說明狀態、中性回饋
     ==================== */
  --cyan-50: #ecfeff; /* 資訊 alert 背景 */
  --cyan-100: #cffafe; /* 資訊 badge 背景 */
  --cyan-200: #a5f3fc; /* 淺邊框 */
  --cyan-300: #67e8f9; /* 裝飾元素 */
  --cyan-400: #22d3ee; /* 次要 icon */
  --cyan-500: #06b6d4; /* 基本值：資訊按鈕、提示標記 */
  --cyan-600: #0891b2; /* 按鈕 hover */
  --cyan-700: #0e7490; /* 按鈕 active */
  --cyan-800: #155e75; /* 深色文字 */
  --cyan-900: #164e63; /* 極深文字 */
  --cyan-950: #083344; /* 深色背景 */

  /* ==================== 語意文字顏色（Semantic Text Color）==================== */
  --color-text-heading: var(--gray-900); /* 標題：區塊標題、頁面標題 */
  --color-text-body: var(--gray-700); /* 正文：預設內文、段落 */
  --color-text-muted: var(--gray-500); /* 輔助：metadata、日期、說明文字 */
  --color-text-placeholder: var(--gray-400); /* 佔位：placeholder、disabled */
  --color-text-inverse: var(--white); /* 反白：深色背景上的白字 */

  /* ==================== 語意背景顏色（Semantic Background Color）==================== */
  --color-bg-base: var(--white); /* 頁面底色 */
  --color-bg-subtle: var(--gray-50); /* 微淺底色：按鈕容器 */
  --color-bg-muted: var(--gray-100); /* 次要區域：sidebar、斑馬紋、下拉選單 */
  --color-bg-hover: var(--gray-200); /* 互動回饋：hover、active 背景 */

  /* ==================== 語意邊框顏色（Semantic Border Color）==================== */
  --color-border-light: var(--gray-100); /* 極淡分隔：卡片、FAQ 底線 */
  --color-border-default: var(--gray-200); /* 一般分隔：卡片邊框、區塊底線 */
  --color-border-strong: var(--gray-300); /* 較強分隔：表單邊框、導覽分隔 */

  /* ==================== 圓角系統 ==================== */
  --border-radius: 8px; /* 預設 */
  --border-radius-sm: 6px; /* sm */
  --border-radius-lg: 10px; /* lg */
  --border-radius-pill: 100px; /* 膠囊 */

  /* ==================== Spacing 間距系統（對齊 Tailwind spacing，供 padding/margin/gap 使用）==================== */
  --spacing-0: 0px; /* 0px */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-9: 2.25rem; /* 36px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-11: 2.75rem; /* 44px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-15: 3.75rem; /* 60px */
  --spacing-20: 5rem; /* 80px */

  /* ==================== 佈局變數 ==================== */
  --nav-height: 80px; /* 導航列高度預設值（由 JS 透過 ResizeObserver 動態覆寫為實際高度） */

  /* ==================== 內容區寬度系統（site-content-narrow）==================== */
  --content-width-xs: 480px;
  --content-width-sm: 600px;
  --content-width-md: 720px;
  --content-width-lg: 840px;
  --content-width-xl: 960px;
  --content-width-2xl: 1080px;
  /* ==================== 區塊間距 ====================
     手機版（≤991px）：sm 40px / 預設 60px / lg 80px
     ==================== */
  --section-spacing-sm: 60px;
  --section-spacing: 100px;
  --section-spacing-lg: 120px;

  /* 品牌色請參考 brand.css */
}

@media (max-width: 991.98px) {
  :root {
    --section-spacing-sm: 40px;
    --section-spacing: 60px;
    --section-spacing-lg: 80px;
  }
}