@charset "utf-8";

/* ==========================================================================
   card-color.css：卡片配色規範層（共用檔，各款內容必須完全相同）
   --------------------------------------------------------------------------
   三層分工：
   1. 結構 card_*   模組的內容排版（card_news、card_job…）
   2. 效果 eft_*    位移、動畫、遮罩、版面；不寫死顏色，需要顏色時讀 --card-*
   3. 配色 clr_*    本檔。只負責 --card-* 顏色角色，不管結構與動畫
   各款 color/*.css 只填色盤 --brand-*（唯一因款而異的地方）。

   用法：在 card_varset.php 的 class 字串加配色 class，例如
     $css_card_page_news = "card card_news eft_slideup clr_solid";
   也可加在列表（$css_ul_*）上，整個列表的卡片一起換色。
   沒加 clr_ 就是 paper 白底。卡片自己的 clr_ 優先於外層列表的 clr_。

   配色組：clr_paper 白底｜clr_clear 透明｜clr_soft 淺底｜clr_solid 主色底｜clr_split 分區（暫緩）
   角色：bg／title／text／meta／icon／border／frame（品牌識別框，frame-text 是壓在 frame 色上的字）／tint（淡色區塊）／heading-bg／date／button，大多有 hover 版
   規則正本：文件/卡片配色命名與使用規則.md
   載入順序：main.css 之後。
   ========================================================================== */

/* 預設與基底：paper 白底。所有卡片都有完整的一般／hover 角色。
   - 同時掛在 :root：部分模組的標題、文字不在 .card 內，沒有預設值會退化成繼承色。
   - 用 :where() 把預設的權重降到 0，色盤檔與配色組都能覆蓋。
   - paper／clear／soft／split 先套這一組完整角色再覆蓋差異，所以不論外層是什麼配色組，
     切換時前景與背景都會成組更換，不會殘留舊配色組的顏色。
   - 色盤可選填：--brand-date-bg、--brand-date-bg-hover、--brand-date-text（日期膠囊的底色與字色）、--brand-frame／--brand-hover-frame（品牌識別框與反白底層的顏色，白字壓在上面需有 4.5 以上對比；亮主色的款式用較深的 fill）。 */



:where(:root, .card),
.clr_paper, .card.clr_paper, :where(.clr_paper) .card,
.clr_clear, .card.clr_clear, :where(.clr_clear) .card,
.clr_soft, .card.clr_soft, :where(.clr_soft) .card,
.clr_split, .card.clr_split, :where(.clr_split) .card,
.clr_outline, .card.clr_outline, :where(.clr_outline) .card {
	--card-bg: #ffffff;
	--card-border: var(--brand-line);
	
	--card-title: var(--brand-ink);
	--card-text: #344c58;
	--card-meta: var(--brand-meta);
	
	--card-icon: var(--brand-ink);
	
	--card-frame: var(--brand-frame, var(--brand-main));
	--card-frame-text: #ffffff;
	
	--card-tint: var(--brand-soft);
	--card-heading-bg: transparent;
	--card-date-bg: var(--brand-date-bg, transparent);
	--card-date-text: var(--brand-date-text, var(--card-meta));
	--card-date-line: var(--brand-line);
	--card-button-bg: var(--brand-fill);
	--card-button-text: #ffffff;
	--card-button-border: var(--brand-fill);

	--card-hover-bg: var(--brand-paper-hover);
	--card-hover-title: var(--brand-title-hover);
	--card-hover-text: #344c58;
	--card-hover-meta: var(--brand-meta);
	--card-hover-icon: var(--brand-title-hover);
	--card-hover-border: var(--brand-main);
	--card-hover-frame: var(--brand-hover-frame, var(--brand-frame, var(--brand-main)));
	--card-hover-heading-bg: transparent;
	--card-hover-date-bg: var(--brand-date-bg-hover, transparent);
	--card-hover-date-line: var(--brand-main);
	--card-hover-button-bg: var(--brand-accent);
	--card-hover-button-text: var(--brand-accent-on);
	--card-hover-button-border: var(--brand-accent);
}

/* 以下配色組只覆寫與 paper 不同的角色。
   每組的選擇器有三種：卡片自己（.clr_x、.card.clr_x）、外層列表底下的卡片（:where(.clr_x) .card）。
   卡片自己的權重較高，所以卡片可以在外層配色組裡指定自己的配色。 */

/* clear 透明底：卡片直接放在有色區塊上時使用，露出所在區域的背景 */
.clr_clear, .card.clr_clear, :where(.clr_clear) .card {
	--card-bg: transparent;
	--card-hover-bg: transparent;
}

/* soft 淺底 */
.clr_soft, .card.clr_soft, :where(.clr_soft) .card {
	--card-bg: var(--brand-soft);
	--card-tint: #ffffff;
	--card-hover-bg: var(--brand-soft-hover);
}

/* solid 主色底：背景與前景成組設定，不沿用 paper 的深字 */
.clr_solid, .card.clr_solid, :where(.clr_solid) .card {
	--card-bg: var(--brand-fill);
	--card-title: #ffffff;
	--card-text: #f3f9fd;
	--card-meta: #e2eff7;
	--card-icon: #e2eff7;
	--card-border: var(--brand-fill);
	--card-frame: var(--brand-fill);
	--card-tint: rgba(0, 0, 0, 0.14);
	--card-date-line: #8cb4cb;
	--card-button-bg: #ffffff;
	--card-button-text: var(--brand-ink);
	--card-button-border: #ffffff;

	--card-hover-bg: var(--brand-fill-hover);
	--card-hover-title: #ffffff;
	--card-hover-text: #f3f9fd;
	--card-hover-meta: #e2eff7;
	--card-hover-icon: #e2eff7;
	--card-hover-border: var(--brand-fill-hover);
	--card-hover-frame: var(--brand-fill-hover);
	--card-hover-date-line: #8cb4cb;
}

/* ===== 候選變體（2026-10-26 試做，待小魚確認；規則文件尚未收錄） ===== */

/* outline 線框：白底＋主色框，用 --card-ring 畫在內側 */
.clr_outline, .card.clr_outline, :where(.clr_outline) .card {
	--card-ring: 2px;
	--card-frame: var(--brand-frame, var(--brand-main));
	--card-hover-frame: var(--brand-deep);
	--card-hover-bg: var(--brand-paper-hover);
}

/* deep 深色底：深主色底、淺字 */
.clr_deep, .card.clr_deep, :where(.clr_deep) .card {
	--card-bg: var(--brand-deep);
	--card-title: #ffffff;
	--card-text: #e2eff7;
	--card-meta: #d3e3f1;
	--card-icon: #d3e3f1;
	--card-border: var(--brand-deep);
	--card-frame: var(--brand-deep);
	--card-tint: rgba(0, 0, 0, 0.14);
	--card-date-line: #8cb4cb;
	--card-button-bg: #ffffff;
	--card-button-text: var(--brand-ink);
	--card-button-border: #ffffff;

	--card-hover-bg: var(--brand-fill);
	--card-hover-title: #ffffff;
	--card-hover-text: #f3f9fd;
	--card-hover-meta: #e2eff7;
	--card-hover-icon: #e2eff7;
	--card-hover-border: var(--brand-fill);
	--card-hover-frame: var(--brand-fill);
	--card-hover-date-line: #8cb4cb;
}

/* accent 強調色底：強調色底，字色用強調色的配對色（色盤 --brand-accent-on） */
.clr_accent, .card.clr_accent, :where(.clr_accent) .card {
	--card-bg: var(--brand-accent);
	--card-title: var(--brand-accent-on);
	--card-text: var(--brand-accent-on);
	--card-meta: var(--brand-accent-on);
	--card-icon: var(--brand-accent-on);
	--card-border: var(--brand-accent);
	--card-frame: var(--brand-accent);
	--card-frame-text: var(--brand-accent-on);
	--card-tint: var(--brand-accent-tint, rgba(0, 0, 0, 0.12));
	--card-date-line: var(--brand-accent-on);
	--card-button-bg: var(--brand-accent-on);
	--card-button-text: var(--brand-accent);
	--card-button-border: var(--brand-accent-on);

	--card-hover-bg: var(--brand-accent-hover, var(--brand-accent));
	--card-hover-title: var(--brand-accent-on);
	--card-hover-text: var(--brand-accent-on);
	--card-hover-meta: var(--brand-accent-on);
	--card-hover-icon: var(--brand-accent-on);
	--card-hover-border: var(--brand-accent-hover, var(--brand-accent));
	--card-hover-frame: var(--brand-accent-hover, var(--brand-accent));
	--card-hover-date-line: var(--brand-accent-on);
	--card-hover-button-bg: var(--brand-ink);
	--card-hover-button-text: #ffffff;
	--card-hover-button-border: var(--brand-ink);
}

/* split 分區：標題帶主色＋正文區白底（暫緩：標題帶的內縮與撐高尚未處理） */
.clr_split, .card.clr_split, :where(.clr_split) .card {
	--card-heading-bg: var(--brand-fill);
	--card-title: #ffffff;
	--card-hover-heading-bg: var(--brand-fill-hover);
	--card-hover-title: #ffffff;
	--card-hover-bg: #ffffff;
}

/* hover、鍵盤焦點：整組一般角色切換成對應的 hover 角色 */
.card:is(:hover, :focus-within) {
	--card-bg: var(--card-hover-bg);
	--card-title: var(--card-hover-title);
	--card-text: var(--card-hover-text);
	--card-meta: var(--card-hover-meta);
	--card-icon: var(--card-hover-icon);
	--card-border: var(--card-hover-border);
	--card-frame: var(--card-hover-frame);
	--card-heading-bg: var(--card-hover-heading-bg);
	--card-date-bg: var(--card-hover-date-bg);
	--card-date-line: var(--card-hover-date-line);
}

/* 按鈕：只有 1 個按鈕的卡片，游標在卡片任何位置就切換；
   有 2 個以上按鈕的卡片（如文件下載）只有按鈕自己 hover 或取得焦點才切換（見 common.css 的 .card-btn:hover） */
.card:not(:has(.card-btn ~ .card-btn)):is(:hover, :focus-within) {
	--card-button-bg: var(--card-hover-button-bg);
	--card-button-text: var(--card-hover-button-text);
	--card-button-border: var(--card-hover-button-border);
}