/* ============================================================
   tokens.css — 設計變數（Design Tokens）
   全站唯一的「設定來源」：色彩 / 字型 / 版型 / 圓角陰影。
   改這裡，全站一起變。斷點無法用變數，另記於註解。

   版型 C「活潑卡片」設計系統（2026-07 改版）：
   - 奶油底 + 純白卡片 + 大圓角 + 柔和陰影
   - 動作分級：主要動作=珊瑚紅實心；次要動作=青綠；播放中狀態=金色
   - 金色底一律配深色字（--gold-ink），白字對比不足
   ============================================================ */
:root{
  /* ---- 色彩 ---- */
  --paper: #FAF5E9;        /* 奶油底色（背景） */
  --paper-dark: #F0E8D3;   /* 稍深底色（區塊底/提示框） */
  --card: #FFFFFF;         /* 卡片底（內容承載） */
  --ink: #1D2B33;          /* 墨水主色（文字/標題） */
  --ink-soft: #4A5A62;     /* 次要文字 */
  --teal: #177E6E;         /* 品牌青綠（導覽/篩選/次要按鈕） */
  --teal-dark: #0D5A4E;    /* 深青綠（漸層深端/hover/音標） */
  --coral: #E85D3D;        /* 動作珊瑚紅（主要按鈕/CTA，全站唯一主動作色） */
  --gold: #E9A319;         /* 點綴金（播放中狀態/GEPT/贊助） */
  --gold-ink: #4A3403;     /* 金色底上的深色字（白字對比不足） */
  --sky: #3E7CB1;          /* 輔助藍（保留給主題色等延伸用途） */
  --line: #E3DAC2;         /* 分隔線/邊框 */
  /* 舊名相容：郵戳紅 → 指向珊瑚紅（stamp-red 的既有用途皆為動作/強調） */
  --stamp-red: var(--coral);

  /* ---- 字型 ---- */
  --font-display: 'Special Elite', 'Noto Serif TC', serif;  /* 標題（打字機感） */
  --font-serif: 'Noto Serif TC', serif;                     /* 中文內文/翻譯 */
  --font-sans: 'Noto Sans TC', sans-serif;                  /* 一般內文 */
  --font-mono: 'IBM Plex Mono', monospace;                  /* 標籤/編號/音標 */

  /* ---- 版型 ---- */
  --container: 1280px;     /* 全站最大寬度 */
  --rail-left: 220px;      /* 左欄寬（篩選/章節） */
  --rail-right: 280px;     /* 右欄寬（最新/贊助/廣告） */
  --gap: 28px;             /* 三欄間距 */
  --pad-x: 24px;           /* 左右內距 */
  /* 響應式斷點（供對照，media query 內需寫死）：
     960px = 三欄收合成單欄；1200px = 卡片 3→2 欄；600px = 卡片 2→1 欄 */

  /* ---- 圓角 / 陰影 ---- */
  --radius: 12px;          /* 小元件（輸入框/badge/提示框） */
  --radius-lg: 18px;       /* 卡片 */
  --radius-xl: 22px;       /* 大卡（hero/文章主卡） */
  --shadow: 0 4px 16px rgba(29,43,51,0.08);
  --shadow-hover: 0 10px 26px rgba(29,43,51,0.14);
  --shadow-pop: 0 12px 34px rgba(29,43,51,0.28);   /* 懸浮元素（迷你播放列） */
}