本頁只練什麼
能以 --surface、--text、--brand 等用途名稱取代元件內散落的固定色碼。
用途型 token 把『這個色彩負責什麼』與實際色值分離，換品牌或主題時不必逐元件搜尋色碼。
要修改的檔案：files/starter/style.css
定位：在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。｜依 starter-3 定位，只修改「用途型 CSS token」的責任。
LESSON-06 · TOPIC 03
用途型 CSS token
能以 --surface、--text、--brand 等用途名稱取代元件內散落的固定色碼。
任務情境
先結果，再原理；完成後要能說出自己看見的證據。
現在的問題
首頁十張卡片都直接寫白底，現在品牌希望同時換成淡藍色表面。
起始狀態：卡片使用 var(--surface)，根 scope 提供 #fff；未套 alternate-surface。
完成後要看到
runtime 的 background-color 由 rgb(255, 255, 255) 變 rgb(217, 238, 243)，元件宣告仍為 background:var(--surface)。
驗收證據：runtime before=rgb(255, 255, 255)、after=rgb(217, 238, 243)、property=background-color
何時會用到
多個元件共用背景、文字、邊框、品牌或 focus 色，並可能換主題時。
常見混淆：--blue-500 是 palette token；--brand-action 才描述用途。兩者可分層，但不應把色名冒充用途。
觀念與最小範例
這段程式是理解起點，不是要你直接跳過 Starter。
用途型 CSS token Semantic CSS custom property tokens
token 是有用途名稱的色彩插座；元件插 --surface，不必知道現在是白色還是深藍。
正式說法：CSS custom property 參與 cascade 並以 var() 取值；semantic token name 描述 UI role，而非綁定特定色相或明暗值。
:root{--surface:#fff;--text:#17324d}.card{background:var(--surface);color:var(--text)}三步完成本主題
每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
Step 1｜先看見目前缺口，不急著貼答案。
檔案：
files/starter/style.css定位：在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。」目前的缺口。
證據：保存 files/starter/style.css 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/style.css，且定位到 在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。。
Step 2｜只修改本主題的一個責任。
檔案：
files/starter/style.css定位：在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。要做：執行實驗切換 alternate-surface class，只覆寫 --surface，讀取同一元件的 computed background-color。
預期：runtime 的 background-color 由 rgb(255, 255, 255) 變 rgb(217, 238, 243)，元件宣告仍為 background:var(--surface)。
證據：runtime before=rgb(255, 255, 255)、after=rgb(217, 238, 243)、property=background-color
卡住先查：在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。
Step 3｜重新載入並以證據驗收，不以『看起來差不多』判定完成。
檔案：
files/starter/style.css定位：在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：runtime 的 background-color 由 rgb(255, 255, 255) 變 rgb(217, 238, 243)，元件宣告仍為 background:var(--surface)。
證據：runtime before=rgb(255, 255, 255)、after=rgb(217, 238, 243)、property=background-color
卡住先查：在 Styles 確認 background 使用 var(--surface)，不是另一個固定色碼。
觀察示範
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
用途型 CSS tokenruntime fixture · read-only demo
本主題示範畫面：用途型 token 卡片
驗收證據
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
提示 1｜方向
先替色彩命名用途，不要直接把 #fff 改成另一個色碼。
提示 2｜關鍵片段
元件保留 background:var(--surface)，只在 scope 覆寫 --surface。
提示 3｜完整解答與原因
完整解答與原因：custom property 透過 cascade 提供值；元件責任不變，只改 token 即可讓 computed background 同步更新。