/* ══ 願景協會品牌 token ══
 *
 * ✅ 品牌層已於 2026-09-02 換成 CI 手冊的正本色（Paul 拍板「能上線的都上線」）。
 * 五個值是直接從手冊 PDF 的路徑填色讀出來的「印出來的那組」，不是手冊標的 Hex
 * （那組是 CMYK 天真換算，兩者不同；驗算見 docs/CI手冊_品牌識別規範_2026-08-27.md 第二節）。
 * 換色前的暫定值（青 #00A8A8 那一組）只留在 git 歷史，這裡不再列。
 *
 * 分兩層是刻意的，換品牌層時介面層要照同樣的壓深邏輯重算（這次已重算）：
 *
 *   品牌層 --brand-*      = 手冊色票，識別用（大面積、圖形、裝飾）
 *   介面層 --ui-*         = 從品牌色衍生、通過 WCAG AA 的顏色，功能用（文字、按鈕、連結）
 *
 * 為什麼不能直接把手冊色拿來當文字色（實測數據，非推測；新色比舊暫定值更亮、更不能）：
 *
 *   色票            對白底對比    WCAG AA 內文(4.5)  大字(3.0)   深墨字放在它上面
 *   青 #56B6BF        2.38          ✘                ✘           7.22 ✓
 *   紫 #8E88AE        3.34          ✘                ✓           5.13 ✓
 *   桃 #E88B9F        2.43          ✘                ✘           7.05 ✓
 *   黃 #F8D55D        1.43          ✘                ✘          11.99 ✓
 *   綠 #678C3C        3.89          ✘                ✓           4.41 只夠大字
 *
 * 所以五色在本站只有兩種用法：**當底、上面放深墨字**（綠底只能放大字），
 * 或**純裝飾幾何**。要當文字色、按鈕底色，一律走下面壓深過的 --ui-*。
 * 壓深的方法是固定色相與飽和度、只降明度，降到剛好過線為止，所以「視覺上仍是同一個色」。
 */

:root {
  /* ── 品牌層：CI 手冊正本色（2026-09-02 換上）。變數名沿用舊名，
     --brand-gold 現在裝的是手冊的「黃」，改名要動每一處引用，不值得。 ── */
  --brand-teal: #56b6bf; /* 主色，標誌上的青 */
  --brand-purple: #8e88ae;
  --brand-pink: #e88b9f;
  --brand-gold: #f8d55d; /* 手冊稱「黃」 */
  --brand-green: #678c3c;

  /* 品牌色的淺色版，當卡片／區塊底色（配深色文字）。
     新色本身就淺，白色要摻得比以前少（22%，黃 30%），否則跟紙底分不出來。
     五個對 --ink 都在 12–16 之間，對紙底 1.05–1.20：看得出是色塊、又不搶字。 */
  --brand-teal-tint: #daeff1;
  --brand-purple-tint: #e6e5ed;
  --brand-pink-tint: #fae5ea;
  --brand-gold-tint: #fdf2ce;
  --brand-green-tint: #dee6d4;

  /* ── 介面層：通過 WCAG AA 的衍生色，日常寫 CSS 用這組 ── */
  --ui-primary: #348189; /* 品牌青壓深，對白底 4.52:1，可當內文與按鈕底（白字在上 4.52） */
  --ui-primary-strong: #2a686e; /* hover／focus 用，對白底 6.36 */
  --ui-primary-tint: var(--brand-teal-tint);

  /* 提示與狀態。黃壓深後才看得清楚（原色 1.43 完全不能當文字）。
     舊暫定色的綠與紫原色就達標，新色兩個都不夠（3.89／3.34），所以現在都要壓。 */
  --ui-warning: #927206; /* 品牌黃壓深，4.53:1 */
  --ui-success: #5e8037; /* 品牌綠壓深，4.55:1 */
  --ui-danger: #b3261e; /* 功能色，不從品牌色來 */
  --ui-accent-alt: #78719f; /* 品牌紫壓深，4.51:1，次要強調用 */

  /* 色塊上的字：疊在 --ui-primary／--ui-primary-strong／--accent／--ui-warning 等
     實心底上的前景色（按鈕、hover 態、.media-embed 深色佔位上的 icon）。固定用白，
     不隨主題或 CI 換色：這些底色本來就是為了讓白字達標才壓深的（見上面各行的對比
     實算），字色本身不是「頁面底色 --bg」，只是剛好同值，兩者語意不同、不要互相替代。
     base.css 原本在每處各寫一次 #fff，2026-09-28 收斂成這個 token。 */
  --ui-on-fill: #ffffff;

  /* ── 中性色 ── */
  --fg: #1a1a1a;
  --bg: #ffffff;
  --muted: #5f6b68;
  --border: #e2e2e2;
  --surface: #f7faf9;

  /* 舊變數名保留為別名，避免既有 CSS 一次全改（新程式碼請用 --ui-primary） */
  --accent: var(--ui-primary);

  /* ══════════════════════════════════════════════════════════════════
     介面層追加（官網 2.0 版面，2026-08-09）
     ══════════════════════════════════════════════════════════════════
     全部從上面的品牌層衍生，上面那幾行的值一個都沒動。
     CI 的「標準色規範」定案後，改品牌層 → 這一段照同樣的壓深邏輯重算即可。

     ── 紙與墨 ──
     底色不用純白也不用暖米白，用把品牌青抽到近乎無彩度的「冷紙」；
     墨不用中性黑，用同一條青軸壓到近黑。全站沒有一滴中性灰，
     這是唯一一個貫穿每個像素的品牌決定。

     暖米白（#F4F1EA 那一帶）是試過才否決的：桃與黃放在暖底上會往土色偏，
     青會被推成醫療綠。冷紙讓五色各自守住自己的色相。
     2026-09-02 換色時紙與墨沒動：新青的色相（186°）與舊青（180°）只差六度，
     抽到近乎無彩度之後看不出差別，而全站的對比數據都是對這張紙算的。 */
  --paper: #f4f8f7; /* 品牌青低彩度化。相對亮度 0.931（白＝1.000） */
  --ink: #0f1e1d; /* 青壓到近黑。對紙 16.03、對白 17.16 */
  --ink-muted: #4c5654; /* 次要說明。對紙 7.09、對白 7.59 */

  /* ⚠️ 換底色帶出來的坑（實算，非推測）：
     --ui-primary #348189 是對「白底」調的，對紙底只有 4.22、不足 4.5。
     凡是坐在紙底上的**小字**（內文連結、語言切換 active、活動 badge）一律改指
     --ui-ink-teal。--ui-primary 當**按鈕底色**時不受影響（白字對 #348189 是 4.52），
     所以它的值不動。 */

  /* ── 五色的介面墨：每個色相各壓一個對紙底達標的文字色（2026-09-02 依新色重算）──
     現在實際用到的只有 --ui-ink-teal（走 --section-ink）；其餘四個留著當 token，
     理由見檔尾「為什麼沒有區塊配色表」——每一節一色那套已經拿掉了，不要靠它們加回來。

       色相    品牌色        介面墨        對紙   對白
       青      #56b6bf       #327c83       4.51   4.83
       桃      #e88b9f       #d52d52       4.53   4.85
       黃      #f8d55d       #8c6e06       4.51   4.83
       紫      #8e88ae       #736c9b       4.51   4.83
       綠      #678c3c       #5b7b35       4.53   4.85 */
  --ui-ink-teal: #327c83;
  --ui-ink-pink: #d52d52;
  --ui-ink-gold: #8c6e06;
  --ui-ink-purple: #736c9b;
  --ui-ink-green: #5b7b35;

  /* ── 狀態幾何：實心＝已建置，斜線＝已預留、尚未填入 ──
     ⚠️ 低對比豁免，刻意的、也算過：--brand-teal 對紙 2.22、--brand-gold 對紙 1.34，
     都低於 3:1（換新色後比以前更低）。這兩個色票在本站**只當純裝飾／狀態幾何**（進度尺、清單脊），
     而它們承載的狀態**另有文字承載**（「規劃中」badge、空狀態句子），不是唯一線索。
     WCAG 1.4.11 對純裝飾與有文字替代的元件本就排除在外。
     反過來說：它們一旦被拿去當文字色就是違規，所以文字一律走上面那五個 --ui-ink-*。 */
  --rail-h: 10px; /* 進度尺與清單脊的厚度，兩者共用同一個值才會讀成同一把尺 */
  --hatch-w: 3px; /* 斜線間距 */

  /* 區塊色。**全站同一個值**，不隨區塊變（Paul 拍板 2026-08-10，理由見下方那段）。
     色塊、脊線、斜線、地圖的漣漪、頁面標題橫條全部讀這三個變數，
     所以要換整站的重點色只改這裡三行。 */
  --section: var(--brand-teal);
  --section-ink: var(--ui-ink-teal);
  --section-tint: var(--brand-teal-tint);

  /* ── 條碼：功能色，不隨主題也不隨 CI 改變 ──
     會員 QR 的黑與白是**機器要讀的東西**，不是裝飾。掃描器靠明暗對比定位，
     換成任何一組品牌色都會壓低對比、在店裡光線不好時掃不到 ——
     而畫面上完全看不出差別（圖案還是那個圖案，只是變成一張掃不到的圖）。
     所以這兩個值刻意站在深淺模式與 CI 換色之外。換色時不要「順手統一」它們。 */
  --qr-ink: #000000;
  --qr-paper: #ffffff;

  /* ── 影音佔位框：功能色，不隨主題也不隨 CI 改變 ──
     .media-embed 是 iframe 載入前的深色佔位（點了才載入，見 base.css），
     不是品牌識別的一部分，只是「看起來像播放器」的慣例色，換 CI 不需要跟著換。 */
  --media-embed-bg: #111;
}

/* 註：內容欄寬的切換（[data-width='wide']）在 base.css，不在這裡。
   本檔只管色彩，欄寬屬「尺度」。而且放這裡會**靜默失效**：
   它與 base.css 的 :root 同權重 (0,1,0)，base.css 後載入 → 後者贏，
   首頁的寬欄整個沒生效（2026-08-09 用 headless 量 padding 才抓到，
   畫面上只表現成「英文版導覽換行」，看起來完全不像欄寬問題）。 */

/* ══ 為什麼沒有「區塊配色表」══
   曾經有過：五格各吃 logo 那個環的一個顏色（青 → 桃 → 黃 → 紫 → 綠，依位置分派）。
   2026-08-10 由 Paul 拿掉，原話是「理論上合理，但是視覺上很突兀。
   logo 上的顏色與要傳遞的意象不用等同網頁色彩選擇基礎」。

   那套的推導沒錯（環的順序＝導覽的順序），但推導成立不等於看起來對：
   五條高彩度的橫條並排在一頁上，讀起來是五個不相干的東西，
   而不是同一個協會的五個面向 —— 剛好與 CIS 要的「安靜、有制度」相反。

   ⚠️ **不要再把它加回來**，包括「只加一兩格」的折衷版。要重新討論請先看
   docs/design-brief.md 第三節（協會聲音）與這一段的日期，別當成疏漏補上去。

   附帶少掉一個無聲的失效模式：那張表必須與 sections.ts 的 SECTIONS 對齊，
   對不上時不會報錯、只會靜靜落回預設青。表沒了，那個對齊義務也沒了。

   區塊之間仍然分得出來，靠的是版面、字級、順序與「規劃中」這類狀態標記 ——
   那些都承載真的資訊，顏色沒有。

   `data-section` 這個屬性仍然保留：導覽的 aria-current 高亮與少數元件用它認自己
   在哪一格（見 sections.ts 的 sectionFromPath）。它現在只管「是哪一格」，不管顏色。 */