/* ============================================================================
   e+ 等公務園｜共用設計 Token（主頁 + 加盟機關獨立頁 共用）
   ----------------------------------------------------------------------------
   使用方式：任一頁面 <head> 內
     <link rel="stylesheet" href="styles/tokens.css">
     <link rel="stylesheet" href="styles/themes.css">
   所有顏色、字級、間距、圓角、陰影都走這裡的變數，元件只引用 var(--xxx)，
   要調整整體比例只改 :root 的 --font-base（1rem）即可。
   ============================================================================ */

:root{
  /* --- 比例基準：1rem = 18px ---
     ⚠ 這份 styles/tokens.css 供「仍掛 Tailwind CDN 的 refactored 展示頁」使用，
     故「不」啟用 font-size:18px（否則 CDN 內建 rem 工具會整體 ×1.125 破版）。
     正式 build（移除 CDN＋跑 px→rem codemod）時再打開下一行：
       (見 handoff/styles/tokens.css，該版已啟用) */
  /* font-size: 18px; */        /* 1rem = 18px（build 時打開）*/
  --font-base: 18px;

  /* --- 字級階層（以 rem 表示，× 18px 得 px）--- */
  --fs-12: 0.667rem;   /* 12 */
  --fs-13: 0.722rem;   /* 13 */
  --fs-14: 0.778rem;   /* 14 */
  --fs-15: 0.833rem;   /* 15 */
  --fs-16: 0.889rem;   /* 16 */
  --fs-17: 0.944rem;   /* 17 */
  --fs-18: 1rem;       /* 18 ← 基準 */
  --fs-19: 1.056rem;   /* 19 */
  --fs-20: 1.111rem;   /* 20 */
  --fs-21: 1.167rem;   /* 21 */
  --fs-22: 1.222rem;   /* 22 */
  --fs-23: 1.278rem;   /* 23 */
  --fs-28: 1.556rem;   /* 28 */
  --fs-32: 1.778rem;   /* 32 */
  --fs-34: 1.889rem;   /* 34 */

  /* --- 字重 --- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* --- 字型 --- */
  --font-sans: 'Inter','Noto Sans','Noto Sans TC','Arial',sans-serif;
  --font-tc:   'Noto Sans TC',sans-serif;
  --font-num:  'Inter','Arial','Noto Sans TC',sans-serif;

  /* --- 間距刻度（rem）--- */
  --sp-1: 0.222rem;  /* 4  */
  --sp-2: 0.444rem;  /* 8  */
  --sp-3: 0.667rem;  /* 12 */
  --sp-4: 0.889rem;  /* 16 */
  --sp-5: 1.111rem;  /* 20 */
  --sp-6: 1.333rem;  /* 24 */
  --sp-8: 1.778rem;  /* 32 */
  --sp-12: 2.667rem; /* 48 */
  --sp-14: 3.111rem; /* 56 ← 內頁卡片與 footer 間距 */

  /* --- 圓角 --- */
  --radius-sm: 0.444rem;   /* 8  */
  --radius-md: 0.556rem;   /* 10 */
  --radius-lg: 0.833rem;   /* 15 */
  --radius-xl: 0.889rem;   /* 16 */
  --radius-2xl: 1.333rem;  /* 24 */
  --radius-pill: 9999px;

  /* --- 陰影 --- */
  --shadow-card: 0 10px 8px rgba(0,0,0,.10), 0 4px 3px rgba(0,0,0,.05);
  --shadow-card-hover: 0 20px 34px -10px rgba(15,23,42,.24);
  --shadow-pop: 0 12px 30px rgba(16,24,40,.18);
  --shadow-arc: none;

  /* --- 中性色（不隨主題切換）--- */
  --on-surface: #24364d;
  --muted: #475569;
  --icon-muted: #94a4b8;
  --surface: #ffffff;
  --surface-1: #f5f6fa;
  --surface-2: #edf0f4;   /* surface2：選單項目 hover／選中底（中性，不隨機關 theme 染色） */
  --border-soft: #e6eaf0;
  --card-media: #12263f;

  /* --- 課程類型 tag 顏色（三站一致，不隨主題切換）--- */
  --badge-digital: #1e2d42;                 /* 數位課程 */
  --badge-assemble: var(--on-secondary-container, #953c17); /* 組裝課程 */
  --badge-ebook: #ffc107;                   /* 電子書（黑字）*/

  /* --- footer --- */
  --footer-bg: #24364d;
  --footer-top: #1d2b3e;   /* footer 頂色＝弧形頂蓋填色 */
}

/* 螢幕更小時可用較小的基準（等比縮小整體）。RD 可依需求開關。
   注意：改 font-size 會同時影響所有 rem，達到「一個值控制整體比例」的目的。 */
/* @media (max-width: 640px){ :root{ font-size: 16px; } } */