/* ══════════════════════════════════════════════════════════════════════
   島島來 設計 Token（草案 v1，2026-09-30）
   ──────────────────────────────────────────────────────────────────────
   這份不是憑空設計的，是掃過全站 84 頁 inline <style> 統計出來的：
     色碼 286 種 → 收斂成下面這組
     字級  65 種 → 收斂成 7 階
     圓角  23 種 → 收斂成 4 階 + 圓形
     陰影  超過 60 種 → 收斂成 3 階

   取值原則：以「現在實際最常用的那個值」為準，不是照理想重新設計，
   所以套用後大部分頁面視覺幾乎不變。只有對比不足的文字色做了加深
   （每個都標了原值與對比數字），那是為了過 WCAG AA 4.5:1。

   ⚠️ 尚未被任何頁面引用。要用的頁面自己 <link> 進來，一頁一頁換，
      不要半套——同一頁不要 token 與舊色碼並存。
   ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── 品牌骨架 ───────────────────────────────────────────────────── */
  --mi-brand:        #33607D;  /* 島嶼藍．109 次．導覽列／主按鈕／連結  對比 6.31 ✅ */
  --mi-brand-deep:   #264A61;  /* 島嶼藍加深．hover／按下 */
  --mi-ink:          #1F3341;  /* 主文字．103 次．對比 12.21 ✅ */
  --mi-gold:         #EAC463;  /* 暖陽黃．裝飾／徽章底．⚠️ 不可當文字色 */
  --mi-orange:       #E8955A;  /* 晨曦橘．全頁最多一顆主要 CTA */

  /* ── 次要文字 ───────────────────────────────────────────────────
     現況有三種在做同一件事：#8A8577(78)／#4A5A66(70)／#6B5E45(10)
     #8A8577 對比只有 3.44 不過 AA → 統一改用加深版 */
  --mi-muted:        #6B6659;  /* 取代 #8A8577．對比 5.35 ✅ */
  --mi-muted-cool:   #4A5A66;  /* 偏冷的次要文字（原值就過 AA 6.66 ✅）*/

  /* ── 狀態色：文字 ───────────────────────────────────────────────
     每個都是現況值加深到過 AA，色相不變，肉眼幾乎看不出差別 */
  --mi-ok:           #4C6B1E;  /* 成功／完成．原 #5E8324(4.13✗) → 5.72 ✅ */
  --mi-warn:         #7E6011;  /* 待處理／提醒．原 #8A6A14(4.73/sand 4.19✗) → 5.50 ✅ */
  --mi-danger:       #A84C4C;  /* 錯誤／取消．原 #B85C5C(4.16✗) → 5.16 ✅
                                  另外還有 #8A3E3E #9B3F3F #8A2F2F #C0552F 四種紅，一併收斂 */
  --mi-brown:        #8B5B30;  /* 島土棕．原 #9C6738(4.45✗) → 5.40 ✅ */

  /* ── 狀態色：底色（淡色版，只當背景不當文字）─────────────────── */
  --mi-ok-bg:        #EFF5E6;  /* 66 次 */
  --mi-warn-bg:      #F9EFD9;  /* 23 次．另有 #FFF8E8 #FFF6E9 #FFF1D8 #FFF7E8 #FDF3D8 五種近似值一併收斂 */
  --mi-danger-bg:    #FBEAEA;  /* 25 次 */
  --mi-info-bg:      #E8EFF3;  /* 146 次．全站第一名的區塊底色 */

  /* ── 狀態色：邊框（試點第二批補）───────────────────────────────
     淡底色區塊常常配一條同色系的邊，但草案 v1 只有底色沒有邊框色，
     各頁只好自己調 → #B7DEC3 #BFE0CC #F0D99A #E7C3C3 一堆近似值 */
  --mi-ok-line:      #C9DFA8;
  --mi-warn-line:    #EDD9A8;
  --mi-danger-line:  #E7C3C3;
  --mi-info-line:    #C5D5E0;  /* 第三批補．原本各頁自己寫 #C5D8F0 */

  /* ── 中性資訊（試點第三批補）───────────────────────────────────
     候補、退款這類「不是成功也不是錯誤」的狀態，攤友端有兩種藍在做同一件事：
     #3F5F9B（候補）／#3B6FB0（退款），底色也各寫 #EEF3FF／#EAF1FB → 收斂 */
  --mi-info:         #3F5F9B;  /* 候補／退款．--mi-info-bg 上 5.44 ✅、米紙白上 5.91 ✅ */

  /* ── 表面 ───────────────────────────────────────────────────────
     現況有七種近乎一樣的米白：#FFFDF9 #FBF6EA #FBF8F1 #F1EEE7 #F7F3EA #F7F2E8 #FBF1F0 */
  --mi-paper:        #FAF7F0;  /* 頁面底．42 次 */
  --mi-card:         #FFFDF9;  /* 卡片底．146 次 */
  --mi-sand:         #F0E9DB;  /* 區塊／次級底．99 次 */

  /* ── 線條 ───────────────────────────────────────────────────────
     現況：#DFD5C2(49) #E5DCC9(23) #C9BFA9(8) #F0D99A(14) #C9B896(5) */
  --mi-line:         #E5DCC9;  /* 一般分隔線 */
  --mi-line-strong:  #DFD5C2;  /* 卡片外框 */

  /* ── 深色底上的文字（試點 session.html 補）─────────────────────
     Hero 這種「島嶼藍大色塊」的版型全站會重複出現（首頁也有），
     但草案 v1 只定了淺底上的文字色，深底上的一律各頁自己寫死 → 收斂成三個 */
  --mi-on-brand:     #FAF7F0;  /* 島嶼藍底上的主文字（＝米紙白）*/
  --mi-on-brand-dim: #CBD9E2;  /* 島嶼藍底上的次要文字 */
  --mi-on-accent:    #3A1E08;  /* 暖陽黃／晨曦橘／新芽綠膠囊上的深色字 */

  /* ── 飽和狀態色（當膠囊底，不是文字）───────────────────────────
     ⚠️ 新芽綠 #8CB84E 對比只有 2.16，**只能當底色**，文字要配 --mi-on-accent */
  --mi-ok-strong:    #8CB84E;

  /* ── 外部品牌色（不收斂，保留原值）─────────────────────────────
     ⚠️ 這兩個是平台**logo 的填色**，拿來當文字一律不過 AA：
        --mi-ig 在粉底上只有 4.25、--mi-fb 在藍底上只有 3.64。
     社群連結按鈕要用下面的 -ink 版本（2026-10-05 實測後補）。 */
  --mi-ig:           #C13584;  /* 圖示／填色專用 */
  --mi-fb:           #1877F2;  /* 圖示／填色專用 */
  --mi-ig-ink:       #C2185B;  /* IG 連結文字．粉底上 4.88 ✅ */
  --mi-ig-bg:        #FCE4EC;  /* IG 連結底色 */
  --mi-fb-ink:       #1059C4;  /* FB 連結文字．藍底上 5.56 ✅ */

  /* ── 字級：65 種 → 7 階 ─────────────────────────────────────────
     原本 .7 .72 .74 .76 .78 .8 .82 .84 .85 .86 .88 .9 .92 .95 十四種
     在 0.7~0.95 這個區間打架，肉眼根本分不出來 */
  --mi-fs-tag:   0.75rem;  /* 12px．標籤、註記         ← .7 .72 .74 .76 .78 */
  --mi-fs-sm:    0.82rem;  /* 13px．輔助說明            ← .8 .82 .84 .85 */
  --mi-fs-body:  0.9rem;   /* 14px．次要內文（最常用，103 次）← .86 .88 .9 .92 */
  --mi-fs-base:  1rem;     /* 16px．內文基準            ← .95 1 1.05 */
  --mi-fs-lead:  1.15rem;  /* 18px．小標、強調          ← 1.1 1.15 */
  --mi-fs-h3:    1.3rem;   /* 21px．手機版大標            ← 試點 session.html 補：
                                1.15 跳到 1.5 中間缺一階，Hero 標題在手機上只能降到這裡 */
  --mi-fs-h2:    1.5rem;   /* 24px．區塊標題            ← 1.5 1.6 1.7 */
  --mi-fs-h1:    2rem;     /* 32px．頁面標題            ← 1.8 2 2.2 2.4 */

  /* ── 圓角：23 種 → 4 階 ────────────────────────────────────────
     品牌規範說「禁止直角卡片」，現況也確實沒有 0 */
  --mi-r-sm:     8px;      /* 輸入框、小標籤   ← 4 5 6 7 8 9 10 */
  --mi-r-md:     14px;     /* 一般卡片         ← 12 13 14 15 16（合計 230 次，主力）*/
  --mi-r-lg:     20px;     /* 大卡片、彈窗     ← 18 20 22 24 */
  --mi-r-pill:   999px;    /* 膠囊、按鈕（286 次，全站最常用）*/
  --mi-r-circle: 50%;      /* 頭像、圓形按鈕 */

  /* ── 陰影：60+ 種 → 3 階 ───────────────────────────────────────
     品牌規範：柔和低調，禁止生硬的黑色陰影 */
  --mi-sh-card:  0 2px 12px rgba(51, 96, 125, .10);   /* 卡片靜止 */
  --mi-sh-raise: 0 10px 28px rgba(51, 96, 125, .08);  /* 浮起、hover */
  --mi-sh-modal: 0 24px 64px rgba(51, 96, 125, .22);  /* 彈窗 */

  /* ── 間距（既有頁面沒有統一，先給一組備用）───────────────────── */
  --mi-gap-xs: 4px;  --mi-gap-sm: 8px;  --mi-gap: 14px;
  --mi-gap-lg: 22px; --mi-gap-xl: 34px;
}