/* ==========================================================================
   fh_ci.css — 風紅 FH Studio 內部頁面共用 CI 樣式 v1
   --------------------------------------------------------------------------
   單一事實來源 (single source of truth) = /opt/fh-shared/brand/brand_tokens.py
   本檔的每個色碼／字級皆由 brand_tokens.py 的正式常數「人工轉出」。
   改色/改字級：MUST 先改 brand_tokens.py，再同步回本檔（NEVER 只改這裡）。

   對應規範：~/.claude/references/fh-ci-visual.md（CI 視覺 v1）
             internal-ui-audit-20260721/standard-draft.md（內部頁面 UI 規範 v1）
   首次產出：2026-07-21（P44 /admin 示範改造，全艦隊之後共用）
   ========================================================================== */

:root {
  /* ---- 主色（brand_tokens: RED_185C_HEX，Aaron 拍板不可改）---- */
  --fh-red:        #E4002B;   /* 唯一重點色：CTA / 表頭 / 關鍵數字 */
  --fh-red-dark:   #B80022;   /* hover 加深（本檔衍生，非 token 常數）*/

  /* ---- Logo 色（BLUE_3005C；只留 Logo 場合，NEVER 進版面）---- */
  --fh-blue:       #0077C8;

  /* ---- 中性灰階（brand_tokens 5 階，深→淺）---- */
  --fh-ink:        #1A1A1A;   /* GRAY_INK  主文黑 */
  --fh-gray:       #4D4D4D;   /* GRAY_BODY 副文字 / 結構第二色 SECONDARY */
  --fh-muted:      #808080;   /* GRAY_MUTED 註腳 */
  --fh-line:       #E6E6E6;   /* GRAY_DIVIDER 分隔線 / 框線 */
  --fh-bg:         #F5F5F5;   /* GRAY_SURFACE 底色 */
  --fh-surface:    #FFFFFF;   /* 卡片白 */

  /* ---- 語意色（brand_tokens SEMANTIC_*）---- */
  --fh-success:    #1E7B45;
  --fh-warning:    #B8860B;
  --fh-error:      #E4002B;   /* = 主紅，不引入第二種紅 */
  --fh-info:       #4D4D4D;

  /* ---- NAS 進度階段色（結案中心 Finder 標籤狀態燈；Aaron Q9=b 例外申請 2026-07-24）----
     四個既有語意色無法覆蓋的中間階段：橙03/藍04/灰05/紫06（綠02=success、紅01=red 沿用）。
     取 macOS Finder 標籤色系、調至白字對比 >= WCAG AA 4.5（pill 統一白字，2026-07-24 修）。
     單一事實來源同步：brand_tokens.py STAGE_*。 */
  --fh-stage-orange: #AA5F09;   /* 03 待上傳YT（白字對比 4.83） */
  --fh-stage-blue:   #2772C8;   /* 04 已上傳待轉NAS1（版面用，非 Logo 藍；白字對比 4.85） */
  --fh-stage-gray:   #717174;   /* 05 已備份NAS1（白字對比 4.87） */
  --fh-stage-purple: #8E5BC9;   /* 06 待刪除（白字對比 4.68，已達標） */

  /* ---- 字體（brand_tokens FONT_*_STACK_CSS）---- */
  --fh-font-heading: 'Noto Sans TC','Noto Sans CJK TC',sans-serif;
  --fh-font-body:    'Noto Sans TC','Noto Sans CJK TC',sans-serif;
  --fh-weight-heading: 500;   /* 中黑＝Medium */

  /* ---- 字級（brand_tokens TYPE_SCALE，px 供網頁）---- */
  --fh-fs-h1: 37px;  --fh-lh-h1: 1.25;
  --fh-fs-h2: 27px;  --fh-lh-h2: 1.3;
  --fh-fs-h3: 20px;  --fh-lh-h3: 1.35;
  --fh-fs-subtitle: 16px; --fh-lh-subtitle: 1.4;
  --fh-fs-body: 15px;     --fh-lh-body: 1.6;
  --fh-fs-footnote: 12px; --fh-lh-footnote: 1.5;

  /* ---- 版面通則 ---- */
  --fh-maxw: 1200px;        /* 主容器（後台/儀表板/列表類）*/
  --fh-maxw-reading: 640px; /* 表單/單欄閱讀類 */
  --fh-maxw-login: 420px;   /* 登入卡 */
}

/* ==========================================================================
   共用 header 樣板
   結構：<header class="fh-header">
           <a class="fh-header__logo" href="/internal/">      ← logo，回內部大門
             <img src="…/assets/fh_logo_light.png" alt="FH Studio">
           </a>
           <a class="fh-header__title" href="<該服務主頁>">服務名稱</a>  ← 回這個系統的家
           <div class="fh-header__spacer"></div>
           <a class="fh-header__back" href="/internal/">← 內部主頁</a>  ← 右上返回槽
         </header>
   白話分工：logo＝回內部大門，標題＝回這個系統的家。
   ========================================================================== */
.fh-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--fh-surface);
  border-bottom: 1px solid var(--fh-line);
  font-family: var(--fh-font-body);
}
.fh-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.fh-header__logo img { height: 32px; width: auto; display: block; }
.fh-header__title {
  font-family: var(--fh-font-heading);
  font-weight: var(--fh-weight-heading);
  font-size: var(--fh-fs-h3);
  color: var(--fh-ink);
  text-decoration: none;
  border-left: 1px solid var(--fh-line);
  padding-left: 16px;
}
.fh-header__title:hover { color: var(--fh-red); }
.fh-header__spacer { flex: 1 1 auto; }
.fh-header__back {
  flex: 0 0 auto;
  font-size: var(--fh-fs-subtitle);
  color: var(--fh-gray);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--fh-line);
  border-radius: 6px;
}
.fh-header__back:hover { color: var(--fh-red); border-color: var(--fh-red); }