/* DN REAL ESTATE DEV — Design Tokens
   來源：Figma oBDMntIhIN0pyQ1aysUm0B（Travis 副本），2026-08-20 由 API 萃取
   桌機基準 1920 / 手機基準 390（iPhone 13 & 14）
*/
:root {
  /* ---- 色票（依使用次數排序，命名依實際用途）---- */
  --c-white:        #ffffff;  /* 主底色 / 反白文字 */
  --c-black:        #000000;  /* Hero 黑底、Footer */
  --c-ink:          #3a3a3a;  /* 主要內文 */
  --c-taupe:        #7b7473;  /* 品牌暖灰褐，次要文字/線 */
  --c-taupe-dark:   #4f4644;  /* 深暖褐，標題/按鈕 */
  --c-taupe-light:  #c6bdbc;  /* 淺暖褐，分隔線/邊框 */
  --c-line:         #d9d5d4;  /* 分隔線 */
  --c-muted:        #b3acab;  /* 弱化文字 */
  --c-bg-soft:      #f5f3f3;  /* 區塊淺底 */
  --c-bg-gray:      #f0f0f0;  /* 卡片淺底 */
  --c-ink-900:      #302a29;
  --c-ink-950:      #141212;
  --c-ink-850:      #352d2b;
  --c-gray-200:     #d9d9d9;
  --c-overlay-60:   rgba(0, 0, 0, .6);  /* 圖片上文字的遮罩 */
  --c-overlay-40:   rgba(0, 0, 0, .4);
  --c-white-55:     rgba(255, 255, 255, .55);
  /* 語言切換國旗用色（泰國國旗同為紅白藍，沿用原稿色值）*/
  --c-flag-blue:    #0052b4;
  --c-flag-red:     #d80027;

  /* ---- 字體 ----
     原稿用 SF UI Text（Apple 系統字，不可作為 web font 散布）。
     拉丁文改用 Inter（字寬/字腔最接近 SF），泰文用 Noto Sans Thai。 */
  --f-latin: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-thai:  'Noto Sans Thai', 'Inter', sans-serif;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    800;  /* 原稿只用 400/500/800 三個字重 */

  /* ---- 字級（原稿實際出現的級距）---- */
  --fs-8:   8px;    --fs-12:  12px;  --fs-14:  14px;  --fs-16:  16px;
  --fs-18:  18px;   --fs-20:  20px;  --fs-24:  24px;  --fs-26:  26px;
  --fs-30:  30px;   --fs-32:  32px;  --fs-33:  33px;  --fs-40:  40px;
  --fs-46:  46px;   --fs-70:  70px;  --fs-112: 112px; /* Hero 數據 4Year / 100,000 */

  /* ---- 行高 ----
     原稿一律 1.2（19/16、24/20、48/40…），對拉丁文 OK。
     泰文有上下疊的母音與聲調符號，1.2 會被裁切，故泰文另開一組。 */
  --lh-tight: 1.2;    /* 拉丁：標題、單行 */
  --lh-body:  1.8;    /* 拉丁：內文（原稿 32/16、36/16）*/
  --lh-thai-tight: 1.45;
  --lh-thai-body:  1.9;

  /* ---- 圓角（原稿只有兩個值）---- */
  --r-sm: 4px;
  --r-md: 10px;

  /* ---- 版面 ---- */
  --w-design: 1920px;   /* 設計稿基準寬 */
  --w-mobile: 390px;
}

/* 泰文自動套用泰文字型與較鬆行高 */
:lang(th) {
  font-family: var(--f-thai);
  line-height: var(--lh-thai-body);
  /* 泰文不用空格分詞，交給瀏覽器 ICU 斷詞 */
  word-break: normal;
  overflow-wrap: break-word;
}
:lang(th) h1, :lang(th) h2, :lang(th) h3 { line-height: var(--lh-thai-tight); }

:lang(en) { font-family: var(--f-latin); }