/* ULP 設計 token
 *
 * 用法：元件 CSS 只能用這裡的變數，不寫色碼。換主題 = 換 <html data-theme="…">，
 * 元件本身不用改。新增主題時，把「主題 token」那一整組複製一份、每個值都填齊。
 *
 * 三套主題（data-theme）：
 *   ink    墨夜  深色，預設：黑底、紅色主要按鈕
 *   brand  品牌  淺色，白底、淺粉卡片、靈鷲山紅按鈕，配色同 093_landing_page
 *   moss   苔原  深綠底、番紅（僧袍色）按鈕
 *
 * 對比度（WCAG 2.x）三套都檢查過：內文 ≥ 4.5、按鈕字 ≥ 4.5、大標與框線類 ≥ 3。
 * 改色後請重算，尤其 --on-accent 對 --accent、--text-muted 對 --surface。
 */

/* ---------- 不隨主題變的 token ---------- */
:root{
  /* 字型 */
  --sans:"Inter",Helvetica,Arial,sans-serif;
  --cond:"League Gothic","Arial Narrow",Impact,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;

  /* 疊在照片、影片上的內容：底圖一樣，所以三套主題都用淺字 + 深遮罩 */
  --on-media:#fff;            /* 照片上的標題、內文 */
  --on-media-soft:#fffef2;    /* 照片上的次要文字、短橫線 */
  --media-ring:#43454c;       /* 影片上的暫停鈕外框 */
  --media-placeholder:#3a3633;/* 照片載入前的底色 */
  --badge-bg:#fff;            /* 照片卡上的 Free 標籤 */
  --badge-fg:#000;

  /* 證書區專用色（目前頁面沒有放這一區，CSS 先留著） */
  --olive:#211d0d; --lime:#dcff00;
}

/* ---------- 主題 token：每套都要把下面這些填齊 ---------- */

/* ink 墨夜（預設）。沒設 data-theme 或值打錯時也用這套 */
:root,[data-theme=ink]{
  color-scheme:dark;
  --bg:#000;                  /* 頁面底色、頁首 */
  --bg-bar:#0d0d0e;           /* 分類標籤底色 */
  --surface:#222326;          /* 問卷選項、搜尋框、聯絡卡 */
  --surface-hover:#303136;
  --surface-2:#272c33;        /* 浮起的卡片（引言卡）、輪播箭頭 */
  --surface-2-hover:#31333b;
  --field:#191c21;            /* 輸入框、勾選框內部 */
  --chip:#43454c;             /* 灰按鈕、已勾選的選項、外框按鈕的框 */
  --chip-hover:#303136;
  --border:#303136;           /* 分隔線（頁尾上緣） */
  --border-strong:#949aa4;    /* 勾選框外框 */
  --text:#fff;
  --text-soft:#d4d5d9;        /* 副標 */
  --text-muted:#9ea0a9;       /* 未選取的標籤、搜尋提示字 */
  --icon-muted:#949aa4;       /* 輪播箭頭圖示 */
  --dot:#596170;              /* 分頁圓點 */
  --dot-on:#fff;
  --accent:#e32652;           /* 主要按鈕（Start Learning、Continue）、紅色短橫 */
  --accent-hover:#d61a46;
  --on-accent:#fff;           /* 主要按鈕上的字、勾勾 */
  --brand:#ef4562;            /* 勾選框打勾後的底色 */
  --highlight:#eed37f;        /* Hero 大標、目前分類的外框與圖示、橫幅標籤 */
  --on-highlight:#000;
  --focus:#fff;               /* 鍵盤焦點外框 */
  --scrim:#191c21;            /* 照片卡底部的漸層遮罩 */
  --logo-plate:#222326;       /* 友站 logo 底板：logo 是白字透明底，所以三套都要深色 */
  --logo-plate-hover:#43454c;
}

/* brand 品牌（淺色）：數值取自 093_landing_page/index.html 的 :root（白底、淺粉段落、靈鷲山紅、酒紅），
   讓這一套跟現有 093 網站一致 */
[data-theme=brand]{
  color-scheme:light;
  --bg:#fff;
  --bg-bar:#faf1ef;           /* 093 --tint */
  --surface:#faf1ef;
  --surface-hover:#f3e4e0;
  --surface-2:#faf1ef;        /* 不用更深的粉：引言卡上 opacity:.6 的字會掉到 4.5 以下 */
  --surface-2-hover:#f3e4e0;
  --field:#fff;
  --chip:#ebddd9;
  --chip-hover:#e0cfca;
  --border:#efe6e3;           /* 093 --line */
  --border-strong:#8f8385;
  --text:#241417;             /* 093 --ink；opacity:.6 時在 --surface 上 4.51 */
  --text-soft:#5c5457;        /* 093 --text */
  --text-muted:#756b6d;       /* 093 --muted */
  --icon-muted:#756b6d;
  --dot:#968a8c;
  --dot-on:#241417;
  --accent:#ac1e2b;           /* 093 --red，同 logo 紅 */
  --accent-hover:#7a151f;     /* 093 --red-dark */
  --on-accent:#fff;
  --brand:#ac1e2b;
  --highlight:#8a6b1e;        /* 093 --gold */
  --on-highlight:#fff;
  --focus:#241417;
  --scrim:#2b0e10;            /* 093 --maroon，照片卡底部帶一點酒紅 */
  --logo-plate:#2b0e10;
  --logo-plate-hover:#45191d;
}

/* moss 苔原 */
[data-theme=moss]{
  color-scheme:dark;
  --bg:#0f1714;
  --bg-bar:#15201b;
  --surface:#1c2a24;
  --surface-hover:#26362f;
  --surface-2:#22332c;
  --surface-2-hover:#2c3f37;
  --field:#131d19;
  --chip:#3a4d44;
  --chip-hover:#2e3f37;
  --border:#2a3a33;
  --border-strong:#8fa197;
  --text:#f1f4ee;
  --text-soft:#cfd8d0;
  --text-muted:#9fb0a6;
  --icon-muted:#8fa197;
  --dot:#5d7268;
  --dot-on:#f1f4ee;
  --accent:#e3923a;
  --accent-hover:#d07f28;
  --on-accent:#1a1206;        /* 番紅底配白字對比不夠（約 2.6），改用深字 */
  --brand:#e3923a;
  --highlight:#e8cf86;
  --on-highlight:#1a1206;
  --focus:#f1f4ee;
  --scrim:#0f1714;
  --logo-plate:#1c2a24;
  --logo-plate-hover:#3a4d44;
}