/* 由 design/tokens.json 產生，不要手改：改 tokens.json 後跑 npm run design:tokens。
   規則見 DESIGN.md。2026-10-07 建立時還沒有頁面引用它；要用時在 base.css 之前載入。 */
:root {
  /* 字級 */
  --fs-xs: 0.8rem;                              /* 等寬字的編號、標籤、日期、版號 */
  --fs-sm: 0.9rem;                              /* 補充說明、註解、表格內文 */
  --fs-base: 1rem;                              /* 內文 */
  --fs-md: 1.15rem;                             /* 卡片標題、小節標題 */
  --fs-lg: 1.5rem;                              /* 段落標題（h2） */
  --fs-xl: 2rem;                                /* 頁面標題（h1） */
  --fs-display: clamp(2rem, 6vw, 3.5rem);       /* 站名、首頁主標 */
  /* 字重 */
  --fw-regular: 400;                            /* 內文 */
  --fw-bold: 700;                               /* 強調、標籤、按鈕 */
  --fw-black: 900;                              /* 標題（思源黑體粗標） */
  /* 字體 */
  --font-sans: 'Inter', 'Noto Sans TC', sans-serif; /* 全站內文與標題 */
  --font-mono: 'JetBrains Mono', 'Noto Sans TC', monospace; /* 編號、標籤、數字、進度（中文落到思源黑體） */
  /* 色票 */
  --color-ink: #111111;                         /* 主文字、深色區塊底、2px 框線、硬陰影 */
  --color-sub: #666666;                         /* 次要文字 */
  --color-inverse-sub: #AAAAAA;                 /* 深色底上的次要文字 */
  --color-line: #DDDDDD;                        /* 細分隔線、中性徽章、停用狀態 */
  --color-page: #F2F2F2;                        /* 頁面底、白卡片裡的淺灰區 */
  --color-surface: #FFFFFF;                     /* 卡片底、深色底上的主文字 */
  --color-neon: #00CC44;                        /* 完成、通過：勾選、進度條、檢查通過。另當階段 01 的色條（只用色條） */
  --color-alert: #FF2A2A;                       /* 期限與扣減：會被扣款、取消資格、退件；錯誤。另當階段 05 的色條（只用色條） */
  --color-warn: #FFAA00;                        /* 輪到你：「你」標籤、要你動手的號碼方塊、主要按鈕。另當階段 02 的色條（只用色條）；只當底色或色塊，不當字色（白底上看不清） */
  --color-stage-03: #9333EA;                    /* 階段 03 寫計畫書的色條（只用色條，不當字色與底色） */
  --color-stage-04: #4DABFF;                    /* 階段 04 出隊籌備的色條（只用色條，不當字色與底色） */
  /* 文字色 */
  --text-ink: var(--color-ink);                 /* 主文字 */
  --text-sub: var(--color-sub);                 /* 次要文字、說明 */
  --text-inverse: var(--color-surface);         /* 深色底上的主文字 */
  --text-inverse-sub: var(--color-inverse-sub); /* 深色底上的次要文字 */
  --text-neon: var(--color-neon);               /* 只放在深色底上（白底對比不夠）：OK、PASS、✓ */
  --text-alert: var(--color-alert);             /* 錯誤、扣款紅線；白底上用粗體 */
  /* 底色 */
  --bg-surface: var(--color-surface);           /* 卡片 */
  --bg-page: var(--color-page);                 /* 頁面底、卡片裡的淺灰區（原本 9 種淺灰都收成這一種） */
  --bg-line: var(--color-line);                 /* 中性徽章、停用按鈕、進度條底 */
  --bg-ink: var(--color-ink);                   /* hero、終端機式結果框、跑馬燈、進度列目前那一格 */
  --bg-neon: var(--color-neon);                 /* 完成、通過：勾選、進度條、全部完成的計數 */
  --bg-alert: var(--color-alert);               /* 錯誤（白字對比不夠，紅底上用黑字） */
  --bg-warn: var(--color-warn);                 /* 輪到你：「你」標籤、要你動手的號碼方塊、主要按鈕（黑字） */
  /* 框線 */
  --border-strong: 2px solid #111111;           /* 框（卡片、輸入框、按鈕）；一個區塊只能有一層 */
  --border-thin: 1px solid #DDDDDD;             /* 框裡的分隔線，不算框 */
  /* 圓角 */
  --radius-none: 0;                             /* 預設：方角 */
  --radius-sm: 4px;                             /* 按鈕、徽章、輸入框 */
  --radius-pill: 99px;                          /* 藥丸形標籤 */
  --radius-round: 50%;                          /* 圓點、頭像 */
  /* 陰影 */
  --shadow-soft: 4px 4px 0 rgba(0,0,0,0.1);     /* 清單裡的卡片（一頁很多張時） */
  --shadow-hard: 4px 4px 0 #111111;             /* 一般卡片、按鈕 */
  --shadow-hard-lg: 6px 6px 0 #111111;          /* 一頁的主角卡、hero */
  --shadow-pass: 4px 4px 0 #00CC44;             /* 完成、通過的卡片（跟綠色同一個意思） */
  /* 間距 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}