/* ============================================================
   tokens.css — 全站唯一起點
   規格出處：spec §1（設備）、§2（token）、§3.2（檔位）
   規則：斷點只改結構；**檔位會覆寫嘅值**（卡嘅幾何、卡內文／測驗尺寸、版面骨架內距
   呢類 base 同矮屏兩份值嘅數）一律喺呢檔寫死，styles.css 對呢批值只準食 var(--…)。
   唔屬呢批嘅裝飾尺寸（陰影、背景圓形、focus 光圈、clamp() 內部嘅排版字級等）照留喺
   styles.css：呢檔冇得覆寫，唔使亦唔準為遷就名目而搬，搬錯反而多返一份來源（覆核第 7c 條）。
   綁法分兩類：卡嘅幾何（--card-w）用 clamp() 綁 min(vw, vh) 兩軸——平板企
   喺支架時可讀性由高度話事，橫直兩轉都要收得住；矮屏檔更由 --app-h 反推
   （見 D7／D10）。字號與內距類（--card-emoji-fs、--card-pad 等）用單軸 vw
   嘅 clamp()——字符大小跟欄寬走，同視口高度冇關係，綁 min() 反而喺橫屏
   無端縮細；得矮屏檔先至用扁平值覆寫做緊湊檔（檔位 :root 就係覆寫位）。
   ============================================================ */

:root {
  color-scheme: light;

  /* --- 色（沿用現有 --primary 等，新增語義別名） --- */
  --bg: #FFF8F0;
  --primary: #FF6B6B;
  --secondary: #4ECDC4;
  --accent: #FFD93D;
  --purple: #A78BFA;
  --green: #6BCB77;
  --blue: #4D96FF;
  --pink: #F78DA7;
  --orange: #FF922B;
  --text: #2D3436;
  /* 加深根據：body canvas 係三端漸變，最壞端 #FFE8D6；舊值 #636E72 喺嗰度實算 4.44，唔達正文級 AA 4.5 */
  --text-light: #5F6A6E;
  --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  --kb-focus-ring: 0 0 0 3px #FFD93D, 0 0 0 6px rgba(255, 217, 61, 0.4);

  /* --- 語義色（spec §2.4）：非 --ink 嘅彩色唔準做正文字色 --- */
  --reward: #FFD93D;
  --success: #6BCB77;
  --try-again: #FF922B;
  --ink: #2D3436;

  /* --- 圓角 --- */
  --radius: 20px;
  --radius-sm: 12px;

  /* --- 觸控尺寸（spec §1.3） --- */
  --tap-min: 56px;
  --tap-kid: 72px;
  --gap-kid: 16px;

  /* --- 時長（spec §2.2） --- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-5: 560ms;
  --dur-ambient: 20s;
  --dur-flip: 600ms;

  /* --- 緩動 --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-glide: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- 層級（spec §2.3）---
     0–40 係 spec 嘅 token 檔；toast／鍵盤說明屬舊站全螢幕彈窗，
     要壓喺任何新層（含 --z-overlay）之上，所以佔住 200／300 兩個命名位。
     新代碼一律用呢度嘅名，唔準再寫裸數字 */
  --z-bg: 0;
  --z-content: 10;
  --z-fx: 20;
  --z-hud: 30;
  --z-overlay: 40;
  --z-toast: 200;
  --z-help: 300;

  /* --- 安全區（spec §1.2） --- */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);

  /* --- 卡片幾何：綁 vh，因平板多在支架上，可讀性由高度決定 --- */
  --card-ratio: 1.166; /* 舊版 .flashcard 360×420 嘅高寬比，換做比例名先唔係魔法數 */
  --card-w: clamp(240px, min(84vw, 52vh), 420px);
  --card-h: calc(var(--card-w) * var(--card-ratio));

  /* --- 矮屏非卡開支預算（D7／D10）：矮屏 --card-w 由 --app-h 減呢個預算、再除 --card-ratio
     反推。佢係常數，檔位唔覆寫，所以裸 152px 唔準再出現喺 --card-w 嗰條公式入面（覆核第 6b 條）。
     分解：72（頂欄＝內距 8×2＋按鈕 56）＋ 8（視覺區上內距）＋ 56（行頭 .subcat-tabs，含自己 6px 滾動條位）＋ 8（行距）＋ 8（視覺區下內距）＝ 152
     以上加數係 844×390 同 740×360 兩檔 getBoundingClientRect() 實量（兩檔同形，一條常數食晒）。
     改任何一個骨架內距／按鈕尺寸／行頭高度，都要返嚟改呢行分解——唔係為格式而寫：
     上一輪六條骨架 token 冇釘值、呢個 152 又係裸常數，改邊個都照綠（覆核第 6 條）。
     下限 150 保手仔揼到，上限 230 防矮屏過份放大；安全區項喺桌面／iframe（--sa-t = --sa-b = 0）
     時扣 0，實錄 844×390 卡 204×238、740×360 卡 178×208 逐位不變，有瀏海先至收細 */
  --short-budget: 152px;

  /* --- 應用高度的單一來源：舊引擎（舊 Safari／iPadOS）冇 dvh，行一做 100vh 兜底；
     識得 dvh 嘅引擎由下面嘅 @supports 蓋走，避免瀏覽器工具列收放時計錯高度 */
  --app-h: 100vh;

  /* --- 卡內文尺寸（plan Task 5 品質覆核第 2 條）：舊寫法係 styles.css base 食 token、
     矮屏檔位再寫死一份——同一個尺寸兩份來源。而家 base 值（即係舊 styles.css base 嗰份）
     全部喺度宣告，矮屏檔位 :root 逐條覆寫（即係舊 max-height:540px 檔嗰份），
     styles.css 連檔位入面嘅字面都唔準再寫。命名統一加組件前綴，唔留冇前綴嘅孤兒名 --- */
  --card-emoji-fs: clamp(96px, calc(57.5px + 8.75vw), 110px);
  --card-char-fs: clamp(56px, calc(34px + 5vw), 64px);
  /* 卡字行高：base 就係 `normal`（實量 1024×768／360×640 兩檔 computed 皆 normal），
     矮屏改 1 係為咗 40px 嘅字唔好比 base 多佔幾行像素、卡內容盒擺唔落（D10 實錄）。
     呢條唔準留喺 styles.css 檔位入面——檔位得返結構，尺寸類值一律食 token（覆核第 7d 條）。 */
  --card-char-lh: normal;
  /* 卡面 alias 行（書面通詞）：口語名做大字，alias 排喺下面做白色 chip。
     呢五條屬詞彙清理新加嘅行（唔係 D10 舊實錄），值全部由瀏覽器實量定（plan「附：詞彙清理
     覆核實錄（2026-10-31）」第 3 節：
     量嘅係「最後一個卡面元素嘅底」到「.flashcard-front 嘅 border box 底」嘅距離——負數即內容
     出水、蓋出卡框之外）。實錄（曱甴／公仔／士多啤梨／馬騮／大髀 五張 alias 卡）：
       22px base：360×640 公仔（最長條 alias 換咗第二行）出水 4px，iPhone 豎屏普遍得返 2px 位；
       16px base：673×841（近方形）曱甴 +1／馬騮 −1／大髀 −2 → 16px 喺細卡會出水；
                  768×1024 同 1024×768 得 +25〜+35 → 16px 喺大卡先食得著；
       13px：320×568 同 673×841 全部 +0〜+3（單行，唔換行）。
     所以 base 用 clamp 跟卡嘅實際闊度走：13px（手機／摺疊細屏）→ 16px（iPad／桌面），
     轉折點設喺 744px（(16−13)/0.032）——673 落返 13、768 升到 16，兩邊都係上面實量過嘅檔。
     chip 唔準改做固定 22px：佢坐喺卡面堆疊嘅最後一格，多出嘅幾十像素全部由表情框頂數（圓圈壓扁）。
     chip 係對比度必需品：alias 直接坐喺 cat 色斑上時量度閘實測最壞 3.63／4.3，過唔到正文級 4.5。 */
  --card-alias-fs: clamp(13px, calc(1.5vw + 2.5px), 16px);
  --card-alias-mt: 6px;
  --card-alias-pad: 2px 10px;
  --card-alias-radius: 999px;
  --card-alias-bg: rgba(255, 255, 255, 0.88);
  --card-back-emoji-fs: 80px; /* 背面表情冇 clamp：舊站 base 就係寫死 80px，照搬唔改行為 */
  --card-jyutping-fs: 32px;
  --card-jyutping-mb: 8px;
  --card-english-fs: 22px;
  --card-pad: 24px; /* .flashcard-front／.flashcard-back 內距 */
  --card-frame-size: min(56%, 200px); /* 表情框邊長：base 用相對值跟卡縮 */
  --card-frame-mb: 16px;
  --card-frame-ring: -12px; /* 虛線圈 inset（負值係向外撐） */
  --speak-btn-mt: 16px;

  /* --- 測驗尺寸（plan Task 5 Step 5）：斷點唔準再寫第二份尺寸，
     全部喺度 clamp() 平滑縮放。下限等似舊 base（細檔唔準再縮），
     上限等似舊 600px 檔（大檔唔準再放大） --- */
  --quiz-options-max-w: clamp(400px, calc(125px + 62.5vw), 500px);
  --quiz-option-fs: clamp(36px, calc(19.5px + 3.75vw), 42px);
  --quiz-option-pad: clamp(20px, calc(9px + 2.5vw), 24px);

  /* --- 版面骨架尺寸：base 與矮屏檔位兩份值都要喺度，styles.css 得食 var() --- */
  --top-pad-y: 12px; /* 頂欄上下內距；矮屏收到 8px 畀卡回血（D10） */
  --top-pad-x: 16px;
  --learn-pad-t: 16px; /* #view-learn 上內距；等於 .view base，唔改到其他屏 */
  --learn-pad-b: 32px;
  --learn-row-gap: var(--gap-kid); /* 兩欄 grid 行距：base 唔留重值，16px 呢個數已由 --gap-kid 話事（覆核第 7e 條）；得矮屏覆寫 8px 先至係緊湊檔 */
  --tabs-pad-b: 10px; /* .subcat-tabs 底部留位（4px 滾動條加氣口）；矮屏收到 6px 將幾粒像素回返畀卡 */
}

@supports (height: 100dvh) {
  :root {
    --app-h: 100dvh;
  }
}

/* ambient 無限動畫嘅總開關（spec §3.1 鐵律 3）：
   呢度刻意唔宣告 --ambient-a，保持佢無定義，每條無限動畫先食到自己寫嘅
   var(--ambient-a, <name>) 兜底值；calm／minimal 兩檔喺 motion.css 把佢改寫做 none，一處靜止 */

/* 冇命中任何檔位時嘅兜底預設。必須排喺四條媒體查詢之前：同權重後來者勝，
   寫喺後邊會蓋走晒全部檔位值。（冇用 :where(:root) 歸零權重：spec 嘅設備檔包括
   唔支援 dvh／View Transitions 嘅舊 iPadOS，Safari 14 以下連 :where() 都食唔到，
   規則一被丟咗，呢個 token 就無聲變做無定義。結構測試用「檔位唔準引入 base 冇嘅
   token」呢條不變式鎖死次序，唔再靠字串位置。） */
:root {
  --grid-cols: 3;
}

/* --- 四條設備檔位（spec §1.1）：只改結構，不改尺寸 --- */

/* 窄屏：iPhone 豎屏、摺疊外屏 */
@media (max-width: 440px) {
  :root {
    --grid-cols: 2;
    --card-w: clamp(220px, 86vw, 320px);
  }
}

/* 矮屏：手機橫屏、摺疊外屏橫向 → 緊湊模式 */
@media (max-height: 540px) {
  :root {
    --grid-cols: 3;
    /* D7 反推：卡高 = 應用高度 − 矮屏非卡開支 − 兩端安全區（plan Step 9 明文要扣 --sa-*）。
       非卡開支呢個數唔準再寫做裸 152px：佢已抽做有名有姓嘅 --short-budget（宣告喺 base，
       逐項分解見嗰段註解——頂欄 72＝內距 8×2＋按鈕 56、視覺區上內距 8、行頭 56、行距 8、
       視覺區下內距 8），呢度只準食 var()，否則改骨架內距而預算唔跟就係第二份來源。
       下限 150 保手仔揼到，上限 230 防矮屏過份放大；安全區項喺桌面／iframe（--sa-t = --sa-b = 0）
       時扣 0，實錄 844×390 卡 204×238、740×360 卡 178×208 逐位不變，有瀏海先至收細 */
    --card-w: clamp(150px, calc((var(--app-h) - var(--short-budget) - var(--sa-t) - var(--sa-b)) / var(--card-ratio)), 230px);

    /* 卡內文同卡一齊縮（覆核第 2 條）：呢一份就係舊 styles.css 矮屏檔位寫死嗰份，
       逐條對住搬，computed 逐位不變——844×390 實錄表情 30px／字 40px／字行高 1／
       背面 44px／粵拼 24px／英文 16px／卡面內距 12px／虛線圈 -6px（D10 同一套實量） */
    --card-emoji-fs: 30px;
    --card-char-fs: 40px;
    --card-char-lh: 1;
    --card-alias-fs: 13px;
    --card-alias-mt: 2px; /* 矮屏得返 15px 嘅 chip＋行位，故再收 mt；pad 同 base，唔喺呢度留重值 */
    --card-back-emoji-fs: 44px;
    --card-jyutping-fs: 24px;
    --card-jyutping-mb: 4px;
    --card-english-fs: 16px;
    --card-pad: 12px;
    --card-frame-size: 30%;
    --card-frame-mb: 6px;
    --card-frame-ring: -6px; /* 虛線圈 -12px 係直排用開嘅裝飾，矮屏會戳出卡外，收到 -6px */
    --speak-btn-mt: 6px;

    /* 版面骨架同步緊湊化：舊檔位寫死嘅 8px／6px 全部收返入度，
       styles.css 嗰邊唔準再留第二份（#top-bar 嘅安全區加算照住 --top-pad-y 行） */
    --top-pad-y: 8px;
    --learn-pad-t: 8px;
    --learn-pad-b: 8px;
    --learn-row-gap: 8px;
    --tabs-pad-b: 6px;
  }
}

/* 近方形：摺疊屏內屏（約 673×841）→ 雙欄 */
/* min-height 541 係守衛：冇呢行，844×390 手機橫屏會同時命中矮屏同近方形，雙欄會蓋走緊湊模式 */
@media (min-width: 441px) and (max-width: 900px) and (min-aspect-ratio: 4/5) and (min-height: 541px) {
  :root {
    --grid-cols: 4;
    --card-w: clamp(260px, min(44vw, 62vh), 380px);
  }
}

/* 寬屏：iPad 橫／豎屏、桌面 */
@media (min-width: 901px) {
  :root {
    --grid-cols: 4;
  }
}