/* FH Studio 風紅 CI 視覺規範 v1 — CSS variables 片段
 * 數值來源：/opt/fh-shared/brand/brand_tokens.py（單一事實來源）
 * 網頁專案 MUST 直接 @import 或複製此片段，NEVER 另行硬編色碼。
 */
:root {
  /* 主色（tg10258 拍板：版面＝紅＋深灰；藍為 Logo 記錄色，NEVER 用於版面元素） */
  --fh-red: #E4002B;
  --fh-logo-blue: #0077C8; /* 僅 Logo 場合，版面不用 */

  /* 中性灰階 */
  --fh-gray-ink: #1A1A1A;
  --fh-gray-body: #4D4D4D;
  --fh-gray-muted: #808080;
  --fh-gray-divider: #E6E6E6;
  --fh-gray-surface: #F5F5F5;

  /* 語意色 */
  --fh-success: #1E7B45;
  --fh-warning: #B8860B;
  --fh-error: #E4002B;
  --fh-info: #4D4D4D;

  /* 字體（含 CJK fallback）。標題＝中黑體（思源中黑）：黑體家族＋font-weight:500
     讓 fontconfig 選 Medium 面（tg10276/10277 拍板，捨襯線） */
  --fh-font-heading: 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;
  --fh-font-heading-weight: 500;
  --fh-font-body: 'Noto Sans TC', 'Noto Sans CJK TC', sans-serif;

  /* 字級（網頁 px） */
  --fh-h1-size: 37px;
  --fh-h2-size: 27px;
  --fh-h3-size: 20px;
  --fh-subtitle-size: 16px;
  --fh-body-size: 15px;
  --fh-footnote-size: 12px;
}

body {
  font-family: var(--fh-font-body);
  color: var(--fh-gray-ink);
  font-size: var(--fh-body-size);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--fh-font-heading);
  font-weight: var(--fh-font-heading-weight);
  color: var(--fh-red);
}

h1 { font-size: var(--fh-h1-size); line-height: 1.25; }
h2 { font-size: var(--fh-h2-size); line-height: 1.3; color: var(--fh-gray-body); }
h3 { font-size: var(--fh-h3-size); line-height: 1.35; color: var(--fh-gray-ink); }

.fh-subtitle { font-size: var(--fh-subtitle-size); color: var(--fh-gray-body); }
.fh-footnote { font-size: var(--fh-footnote-size); color: var(--fh-gray-muted); }

table.fh-table { border-collapse: collapse; width: 100%; }
table.fh-table th {
  background: var(--fh-red);
  color: #FFFFFF;
  padding: 8px 12px;
  border: 1px solid var(--fh-gray-divider);
}
table.fh-table td {
  padding: 8px 12px;
  border: 1px solid var(--fh-gray-divider);
}
table.fh-table tr:nth-child(even) td {
  background: var(--fh-gray-surface);
}

.fh-badge-success { color: #FFFFFF; background: var(--fh-success); padding: 2px 8px; border-radius: 3px; }
.fh-badge-warning { color: #FFFFFF; background: var(--fh-warning); padding: 2px 8px; border-radius: 3px; }
.fh-badge-error   { color: #FFFFFF; background: var(--fh-error);   padding: 2px 8px; border-radius: 3px; }
.fh-badge-info    { color: #FFFFFF; background: var(--fh-info);    padding: 2px 8px; border-radius: 3px; }

.fh-footer {
  border-top: 1px solid var(--fh-gray-divider);
  color: var(--fh-gray-muted);
  font-size: var(--fh-footnote-size);
  padding-top: 8px;
  margin-top: 24px;
  text-align: center;
}