/* ============================================================================
   主題層（Theme Layer）
   ----------------------------------------------------------------------------
   核心觀念：整站只切換「一個」變數 --primary，其餘語意 token 全部由 color-mix
   自動衍生。加盟機關獨立頁換色＝換 <html data-theme>，不改任何元件樣式。

   與 Figma 對應（library「color_theme_e等公務園+」）：
     主首頁（Portal）   → theme-color 集合（light/dark），HTML 不設 data-theme
     加盟機關獨立頁     → affiliate-theme 集合（mode T1–T4），HTML 用 data-theme="t1…t4"
     Figma 變數 affiliate/<name>  ⇔  CSS 變數 --affiliate-<name>（Dev Mode code syntax 相同）

   用法：
     主頁（e+ 官方）     <html> 不設 data-theme → 預設 e+ teal
     加盟機關獨立頁      <html data-theme="t1">（t1 磚紅／t2 紫／t3 靛／t4 藍）
     DEMO 動態切換       document.documentElement.dataset.theme = 't2'
   ============================================================================ */

:root{
  /* e+ 官方主題（主頁）預設 */
  --primary: #1f7a73;                                            /* e+ teal */
  --on-primary: #ffffff;
  --primary-container: color-mix(in srgb, var(--primary) 14%, #fff);
  --on-primary-container: color-mix(in srgb, var(--primary) 82%, #000);
  --primary-hover: color-mix(in srgb, var(--primary) 88%, #000);
  --primary-pressed: color-mix(in srgb, var(--primary) 78%, #000);
  --inverse-primary: color-mix(in srgb, var(--primary) 42%, #fff);

  /* 統計帶 / 內頁 banner 底 / 頁面底，皆由 primary 衍生 */
  --stat-1: var(--primary);
  --stat-2: var(--primary-pressed);
  --bg-tint: color-mix(in srgb, var(--primary) 8%, #fff);        /* inner-banner 底 */

  /* ---- affiliate-theme：與 Figma affiliate/* 一對一（名稱＝Figma 變數名） ---- */
  --affiliate-primary:          var(--primary);
  --affiliate-primary-tint-55:  color-mix(in srgb, var(--primary) 55%, #fff);  /* 標題色條頂、選中框、hover 框 */
  --affiliate-primary-tint-14:  var(--primary-container);                      /* 最新消息 CTA 底 */
  --affiliate-primary-tint-8:   var(--bg-tint);                                /* 頁面底暈染 */
  --affiliate-primary-shade-84: color-mix(in srgb, var(--primary) 84%, #000);  /* 標題色條底 */
  --affiliate-primary-shade-82: var(--on-primary-container);                   /* footer 連結文字 */
  --affiliate-primary-hover:    var(--primary-hover);                          /* 88% + black */
  --affiliate-primary-pressed:  var(--primary-pressed);                        /* 78% + black */
  /* 標題色條（5 個 section 共用） */
  --affiliate-title-bar: linear-gradient(180deg in oklab, var(--affiliate-primary-tint-55) 0%, var(--affiliate-primary-shade-84) 100%);
}

/* ---- 加盟機關主題（值＝Figma affiliate-theme 的 4 個 mode）---- */
[data-theme="t1"]    { --primary: #BE5A2C; }  /* T1 磚紅｜港都e學苑預設 */
[data-theme="t2"]    { --primary: #8248A3; }  /* T2 紫 */
[data-theme="t3"]    { --primary: #5F5FB8; }  /* T3 靛 */
[data-theme="t4"]    { --primary: #007AAD; }  /* T4 藍｜公務人力發展學院預設 */
[data-theme="portu"] { --primary: #BE5A2C; }  /* 舊代碼相容（＝t1） */

/* 新增加盟機關主題：
   1. 此處加一行 [data-theme="t5"]{ --primary:#hex; }
   2. Figma library affiliate-theme 加一個 mode，9 個 token 依 color-mix 公式填值
   不需改任何元件樣式。 */