@charset "UTF-8";

/* 字型載入移至 openbook.libraries.yml 的 google-fonts（external <link>，不受 CSS 聚合影響）；
   CKEditor 走 editor.css 的 @import。此處不再 @import，避免聚合時 @import 落到檔中段被忽略。 */

/*
 * Design Tokens（CSS 變數）
 *
 * 來源：Figma「Openbook」首頁最終版（frame `首頁` 桌機 + `首頁-手機` 手機，
 * 2026-06-09 自 .fig 離線抽出，字級已比對全頁所有文字節點）。
 * 前台和 CKEditor 共用，宣告於 :root 和 .ck-content；僅此一處宣告，
 * 不在 custom.css / editor.css 重複（三檔分離原則）。
 * 命名前綴 --ob- 用以避開 Bootstrap Barrio（--bs-*）與 gin 變數衝突。
 */

:root,
.ck-content {

  /*ANCHOR - 品牌色 */
  --ob-primary: #00A0B4;          /* color-primary：主青藍 */
  --ob-primary-light: #00B9C8;    /* color-primary-light：亮青，強調/hover */
  --ob-accent-yellow: #FEE058;    /* 點綴黃：bg-primary 區 hover/進度線亮段（fig 790:2644） */
  --ob-ink: #191C1B;              /* color-black：主要文字色 */

  /*ANCHOR - 灰階(藍灰系) */
  --ob-gray-dark: #263238;        /* color-gray-dark */
  --ob-gray: #37474F;             /* color-gray */
  --ob-gray-mid: #9E9E9E;         /* 次要文字 */
  --ob-gray-text: #424242;        /* 中性深灰：圖說（fig 文章內頁 949:2659） */
  --ob-gray-blue: #CFD8DC;        /* color-gray-blue */
  --ob-gray-light: #E5E7EB;       /* color-gray-light */
  --ob-border: #E1E4E8;           /* 分隔線 / 邊框 */

  /*ANCHOR - 背景 */
  --ob-bg: #F3F5F5;               /* color-bg：主背景 */
  --ob-bg-alt: #ECEEEF;           /* 次背景 */
  --ob-bg-gray: #E1E4E8;          /* 灰帶區塊背景（fig 文章內頁文末「繼續閱讀本專欄」949:2659 取樣） */
  --ob-white: #FFFFFF;
  --ob-dark: #020202;             /* 深色區塊背景 */
  --ob-black: #111111;            /* 文章內頁深色版頁底（fig 1004:5324） */

  /*ANCHOR - 點綴色(標籤 / highlight) */
  --ob-accent-yellow: #FEE058;
  --ob-accent-pink: #E86AA6;
  --ob-error: #D32F2F;            /* 表單錯誤：fig 無錯誤色，取 Material red 700（CRM civicrm.css 同系） */

  /*ANCHOR - 字型家族 */
  --ob-font-serif: "Noto Serif TC", serif;            /* 主字：標題與內文 */
  --ob-font-sans: "Noto Sans TC", sans-serif;         /* UI / meta / footer */
  --ob-font-serif-en: "Ibarra Real Nova", serif;      /* 英數：編號、Read more */
  --ob-font-brand: "jf-jinxuan-3.1", "Noto Serif TC", serif; /* 贊助標題(金萱，付費字型，授權待確認) */

  /*ANCHOR - 字級
    規則：凡手機↔桌機字級有差，一律 clamp(手機值, 768–1200 流體, 桌機值)；
    ≤768px 取手機值、≥1200px 取桌機值、平板 768–1199 線性內插(無平板稿靠內插過渡)。
    完全相同者(body/small/xs)才固定。 */
  --ob-fs-hero: clamp(20px, 3.70vw - 8.44px, 36px);     /* KV 主標：20 → 36 */
  --ob-fs-title: clamp(20px, 1.39vw + 9.33px, 26px);    /* 章節標題：20 → 26(首頁 12 區塊 block title；正式稿 786:1909 手機量 20) */
  --ob-fs-card-lg: clamp(18px, 1.39vw + 7.33px, 24px);  /* 大卡片標題：18 → 24 */
  --ob-fs-card: clamp(16px, 0.93vw + 8.89px, 20px);     /* 卡片標題：16 → 20 */
  --ob-fs-card-sm: clamp(16px, 0.46vw + 12.44px, 18px); /* 小卡片標題：16 → 18 */
  --ob-fs-label: clamp(16px, 0.23vw + 14.22px, 17px);   /* 分類標籤 / 頁尾標頭：16 → 17 */
  --ob-fs-body: 16px;             /* 內文：手機桌機同 */
  --ob-fs-meta: clamp(13px, 0.46vw + 9.44px, 15px);     /* 作者 / 日期 meta：13 → 15 */
  --ob-fs-small: 14px;            /* 註腳連結：手機桌機同 */
  --ob-fs-xs: 13px;               /* 版權 / 圖說：手機桌機同 */

  /*ANCHOR - 行高 */
  --ob-lh-tight: 1;               /* 標題單行 */
  --ob-lh-snug: 1.3;              /* 大標多行 */
  --ob-lh-base: 1.4;              /* 一般內文 */

  /*ANCHOR - 字距 */
  --ob-ls-base: 0.03em;           /* 3%：多數標題 */
  --ob-ls-wide: 0.07em;           /* 7%：章節標題 */
  --ob-ls-wider: 0.08em;          /* 8%：分類 / footer 連結 */

  /*ANCHOR - 圓角 */
  --ob-radius: 8px;               /* 卡片圓角(全站統一，手機桌機同) */

  /*ANCHOR - 陰影 */
  --ob-shadow-card: 0 1.5px 4px rgba(0, 0, 0, 0.12);  /* 卡片浮起(alpha 待對 PNG 微調) */
}