/* ==========================================================================
   設計 token
   ==========================================================================

   設計稿（環宇官網改版.dc.html）的版型、內容與互動都是最終稿，
   但它的顏色與字體是「佔位」的 —— 整份稿子透過 _ds 底下那個 organic
   設計系統的 styles.css 上色，那是一組米色／橘／橄欖綠的通用色盤配
   Caprasimo 展示字體，全檔案 0 次出現任何品牌色。

   這裡按設計簡報做機械式重映射（也和現站 HTML 小工具的
   --navy:#0d2340 / --gold:#c9a24b 一致）：

     設計稿 token            佔位值        →  品牌值
     --color-bg              #f5ead8 米色      #FFFFFF
     --color-surface         #ebddc5           #F7F8FA
     --color-text            #201e1d           #1A1A1A
     --color-neutral-700     #645c50           #5A6472
     --color-divider         ink 16%           #E5E8EC
     --color-accent          #c67139 橘        #C9A961 香檳金
     --color-accent-700      #8c491a           #8A6D2F（深金，白底才過 AA）
     --color-accent-2-900    #272e1b 橄欖      #0A2540 深海軍藍
     --color-accent-2-800    #3d472b           #123A63

   無障礙：#C9A961 在白底上當文字對比不足（約 2.1:1）。
   依簡報只用在按鈕填色、細分隔線、數字、圖標描邊；
   金色按鈕的字用深海軍藍而不是白色；文字連結用 #8A6D2F。
   ========================================================================== */

:root {
	/* ---- 基礎 ---- */
	--color-bg:      #ffffff;
	--color-surface: #f7f8fa;
	--color-text:    #1a1a1a;
	--color-divider: #e5e8ec;

	/* ---- 中性階 ---- */
	--color-neutral-100: #ffffff;
	--color-neutral-200: #f7f8fa;
	--color-neutral-300: #eff1f4;
	--color-neutral-400: #e5e8ec;
	--color-neutral-500: #c7cdd6;
	--color-neutral-600: #9aa3b0;
	--color-neutral-700: #5a6472;
	--color-neutral-800: #3a424e;
	--color-neutral-900: #1a1a1a;

	/* ---- 香檳金：只用於填色、細線、數字、圖標描邊 ---- */
	--color-accent:     #c9a961;
	--color-accent-100: #f9f3e6;
	--color-accent-200: #efe3cb;
	--color-accent-300: #e3cfa8;
	--color-accent-400: #d6bc85;
	--color-accent-500: #c9a961;
	--color-accent-600: #a8873f;
	--color-accent-700: #8a6d2f; /* 白底上的文字連結用這個才過 AA */
	--color-accent-800: #6b551f;
	--color-accent-900: #4a3a12;

	/* ---- 深海軍藍：深色橫幅、頁尾、頁首捲動後 ---- */
	--color-navy:         #0a2540;
	--color-accent-2:     #123a63;
	--color-accent-2-100: #edf3f9;
	--color-accent-2-200: #d2e0ee;
	--color-accent-2-300: #a9c4de;
	--color-accent-2-400: #7ba3cc;
	--color-accent-2-500: #4a7fb5;
	--color-accent-2-600: #2a6098;
	--color-accent-2-700: #1b4c7e;
	--color-accent-2-800: #123a63;
	--color-accent-2-900: #0a2540;

	/* ---- 狀態 ---- */
	--color-success: #1f6f5c;
	--color-warning: #8a6d2f;
	--color-danger:  #a3282d;

	/* ---- 字體 ----
	   中文用 Noto Sans TC；拉丁與數字用 Inter（設計簡報指定）。
	   font-family 順序刻意把 Inter 放在 Noto 之前 ——
	   Inter 沒有中文字符，瀏覽器會自動落回 Noto，
	   於是英數用 Inter、中文用 Noto，不需要額外標記。 */
	--font-body:    "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans GB", sans-serif;
	--font-heading: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans GB", sans-serif;

	/* ---- 排版 ----
	   中文長段落必須放寬行高（設計簡報：現站太擠）。 */
	--line-body:    1.85;
	--line-heading: 1.35;
	--track-body:   0.02em;

	--fs-h1:      48px;
	--fs-h1-m:    32px;
	--fs-h2:      34px;
	--fs-h2-m:    25px;
	--fs-h3:      20px;
	--fs-body:    17px;
	--fs-body-m:  16px;
	--fs-small:   14px;
	--fs-tiny:    12.5px;

	/* ---- 間距與形狀 ---- */
	--gap:        20px;
	--section-y:  86px;
	--section-y-m: 52px;
	--wrap:       1200px;
	--wrap-narrow: 820px;
	/* 設計稿的形狀語言：卡片與區塊 16px，按鈕與標籤一律膠囊。
	   （設計簡報原本寫「圓角統一 8px」，但最終設計稿走的是
	   16px 圓角 + 999px 膠囊按鈕，以設計稿為準。） */
	--radius:      16px;
	--radius-sm:   10px;  /* 表單欄位、表格等細小元件 */
	--radius-lg:   22px;  /* 深色 CTA 條、大面積面板 */
	--radius-pill: 999px; /* 按鈕、標籤、分頁鈕 */

	/* ---- 陰影：少用，需要時極淡 ---- */
	--shadow-sm: 0 1px 3px rgba(10, 37, 64, .05);
	--shadow-md: 0 2px 12px rgba(10, 37, 64, .06);
	--shadow-lg: 0 12px 34px rgba(10, 37, 64, .10);

	/* ---- 動態：區塊進場 200ms 上浮淡入。不做視差、不自動輪播 ---- */
	--ease:     cubic-bezier(.4, 0, .2, 1);
	--dur-fast: 150ms;
	--dur:      200ms;

	--header-h: 72px;
}

@media (max-width: 900px) {
	:root {
		--fs-h1:     var(--fs-h1-m);
		--fs-h2:     var(--fs-h2-m);
		--fs-body:   var(--fs-body-m);
		--section-y: var(--section-y-m);
		--header-h:  60px;
	}
}

/* 尊重使用者的減少動態偏好 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}