@layer theme-custom {
/* ══════════════════════════════════════════════════════════════
   黃禮宏 個人品牌色彩系統 v1.0
   「墨藍的夜，托住一道金色的日出」
   規範全文：Leon is free/01_知識庫/品牌_黃禮宏個人品牌色彩系統_墨藍與金.md
   2026-08-10

   五個實作前提（都是踩過才知道的，改動前先讀）：
   ① 平台把自訂 CSS 包在 @layer 內（優先權低於未分層的主題樣式），
      顏色宣告必須加 !important 才生效。只對顏色加，不動版面結構。
   ② footer 在 div.content 之外（body > footer），色票 token 必須
      在兩個地方各宣告一次，否則 footer 讀不到變數。
   ③ 連結色規則一定要排除所有 class 含 btn 的元素——否則實心按鈕
      會變成「曙青字＋深底」，對比掉到 2 以下（404 頁踩過）。
   ④ 頁首其實有兩塊：nav.navbar 與 div.mobile-menu（放 logo 與
      搜尋／會員圖示），兩塊都要寫，只寫 nav.navbar 會漏掉一半。
   ⑤ 被排除的元素得各自補色，否則留在舊色。已補：.btn-full、
      .btn-outline-*、.blog-footer-btn（含內層）、.comment-counter。
   ══════════════════════════════════════════════════════════════ */

/* ── 色票 token ── */
div.content,
footer {
  --hl-ink:       #0E2A42;  /* 墨藍  主色：標題、頁首、footer 底 */
  --hl-brass:     #B8873C;  /* 黃銅  品牌記號，永不做文字 */
  --hl-gold:      #D9B166;  /* 淺金  深底專用（on 墨藍 7.3 AAA） */
  --hl-paper:     #F6F3ED;  /* 紙白  深底上的文字 */
  --hl-sand:      #EBE7DC;  /* 紙白加深  標籤丸底（墨藍 on 它 11.9 AAA） */
  --hl-mist-ink:  #5C6B76;  /* 霧灰加深  淺底次要文字（4.96 AA） */
  --hl-mist-lite: #B7C3CC;  /* 霧灰提亮  墨藍底文字（8.18 AAA） */
  --hl-teal:      #0F6E73;  /* 曙青  行動色：連結、外框按鈕（5.42 AA） */
  --hl-abyss:     #141B21;  /* 潭黑  內文（15.69 AAA） */
}

/* ── 1. 標題：墨藍（含清單頁標題連結，原為 #008CDA） ───────── */
div.content #pjax-container h1,
div.content #pjax-container h2,
div.content #pjax-container h3,
div.content #pjax-container h4,
div.content #pjax-container h5,
div.content #pjax-container h1 a,
div.content #pjax-container h2 a,
div.content #pjax-container h3 a,
div.content #pjax-container h2.middle-title,
div.content #pjax-container h2.middle-title a,
div.content #pjax-container h2.title,
div.content #pjax-container h2.title a,
div.content #pjax-container h2.pagging-title {
  color: var(--hl-ink) !important;
}
div.content #pjax-container h1 a:hover,
div.content #pjax-container h2 a:hover,
div.content #pjax-container h2.middle-title a:hover {
  color: var(--hl-teal) !important;
}

/* ── 2. 內文：潭黑 ─────────────────────────────────────────── */
div.content #pjax-container p,
div.content #pjax-container li,
div.content #pjax-container td,
div.content #pjax-container dd,
div.content #pjax-container blockquote {
  color: var(--hl-abyss) !important;
}

/* ── 3. 連結：曙青 ─────────────────────────────────────────────
   ⚠️ 這一條同時是可及性修正：原連結色 #008CDA 在本站底色上
   對比僅 3.37，未達 WCAG AA（4.5）；曙青 5.42 通過。 */
div.content #pjax-container a:not([class*="btn"]):not(.badge):not(.label):not(.article-tag) {
  color: var(--hl-teal) !important;
}
div.content #pjax-container a:not([class*="btn"]):not(.badge):not(.label):not(.article-tag):hover {
  color: var(--hl-ink) !important;
}

/* ── 4. 次要資訊（日期、摘要、說明、留言數）：霧灰加深 ─────── */
div.content #pjax-container .date,
div.content #pjax-container .post-date,
div.content #pjax-container .text-muted,
div.content #pjax-container small,
div.content #pjax-container .description,
div.content #pjax-container .comment-counter,
div.content #pjax-container .comment-counter span {
  color: var(--hl-mist-ink) !important;
}

/* ── 5. 頁首兩塊：nav.navbar ＋ div.mobile-menu ────────────────
   含 logo 與圖示。原主題強調色 #AF801B 在淺底上對比 3.27，
   做為功能性圖示不合格，一律收進墨藍。 */
div.content nav.navbar a,
div.content nav.navbar .nav-link,
div.content nav.navbar i,
div.content nav.navbar .fas,
div.content nav.navbar .far,
div.content nav.navbar .fab,
div.content .mobile-menu a,
div.content .mobile-menu a.logo-text,
div.content .mobile-menu i,
div.content .mobile-menu .fas,
div.content .mobile-menu .far,
div.content .mobile-menu .fab {
  color: var(--hl-ink) !important;
}
div.content nav.navbar a:hover,
div.content nav.navbar a:hover i,
div.content .mobile-menu a:hover,
div.content .mobile-menu a:hover i {
  color: var(--hl-teal) !important;
}

/* ── 6. 頁尾：墨藍底＋霧灰提亮字＋淺金標題 ──────────────────
   footer 在 div.content 之外，selector 從 body 起算。
   純黑 #000 是禁用色（溫度理由），改用墨藍。 */
body > footer {
  background-color: var(--hl-ink) !important;
  color: var(--hl-mist-lite) !important;
}
body > footer p,
body > footer li,
body > footer ul,
body > footer span,
body > footer div,
body > footer small {
  color: var(--hl-mist-lite) !important;
}
body > footer a {
  color: var(--hl-mist-lite) !important;
}
body > footer a:hover {
  color: var(--hl-gold) !important;
}
body > footer h4,
body > footer h5,
body > footer .small-title {
  color: var(--hl-gold) !important;
}
body > footer hr,
body > footer .border-top {
  border-color: rgba(183, 195, 204, 0.25) !important;
}

/* ── 7. 實心按鈕：墨藍底＋紙白字（13.27 AAA） ───────────────── */
div.content #pjax-container .btn-primary,
div.content #pjax-container .btn-dark,
div.content #pjax-container .btn-full,
div.content #pjax-container button.btn-primary,
div.content #pjax-container button.btn-full,
div.content #pjax-container input[type="submit"],
div.content #pjax-container .style404-btn.primary {
  background-color: var(--hl-ink) !important;
  border-color: var(--hl-ink) !important;
  color: var(--hl-paper) !important;
}
div.content #pjax-container .btn-primary:hover,
div.content #pjax-container .btn-full:hover,
div.content #pjax-container .style404-btn.primary:hover {
  background-color: var(--hl-teal) !important;
  border-color: var(--hl-teal) !important;
  color: var(--hl-paper) !important;
}

/* ── 7b. 外框／幽靈按鈕：曙青（含內層圖示與計數） ───────────── */
div.content #pjax-container .btn-border,
div.content #pjax-container a.btn-border,
div.content #pjax-container .style404-btn.ghost,
div.content #pjax-container .btn-outline-secondary,
div.content #pjax-container .btn-outline-primary,
div.content #pjax-container .btn-outline-dark,
div.content #pjax-container a.blog-footer-btn,
div.content #pjax-container a.blog-footer-btn * {
  background-color: transparent !important;
  color: var(--hl-teal) !important;
  border-color: var(--hl-teal) !important;
}
div.content #pjax-container .btn-border:hover,
div.content #pjax-container a.btn-border:hover,
div.content #pjax-container .style404-btn.ghost:hover,
div.content #pjax-container .btn-outline-secondary:hover,
div.content #pjax-container .btn-outline-primary:hover,
div.content #pjax-container .btn-outline-dark:hover,
div.content #pjax-container a.blog-footer-btn:hover,
div.content #pjax-container a.blog-footer-btn:hover * {
  background-color: var(--hl-teal) !important;
  border-color: var(--hl-teal) !important;
  color: var(--hl-paper) !important;
}

/* ── 7c. 標籤丸：暖砂底＋墨藍字（11.9 AAA） ───────────────────
   原為中灰底 #AFAFAF，中灰是暖白版面裡唯一一塊冷色。 */
div.content #pjax-container a.article-tag {
  background-color: var(--hl-sand) !important;
  color: var(--hl-ink) !important;
  border-color: var(--hl-sand) !important;
}
div.content #pjax-container a.article-tag:hover {
  background-color: var(--hl-ink) !important;
  color: var(--hl-paper) !important;
  border-color: var(--hl-ink) !important;
}

/* ── 8. 黃銅記號＝品牌指紋 ────────────────────────────────────
   金只做記號、永不做文字。h1 下方 56px 細線，
   與電子報信頭那條金線是同一個記號。 */
div.content #pjax-container h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background-color: var(--hl-brass);
  margin: 14px 0 0;
}
div.content #pjax-container hr {
  border-top-color: rgba(184, 135, 60, 0.35) !important;
}

/* ── 9. 選取字反白：淺金底＋墨藍字 ─────────────────────────── */
div.content ::selection {
  background-color: var(--hl-gold);
  color: var(--hl-ink);
}

/* ── 10. 歷史色攔截網（過渡措施） ─────────────────────────────
   站上 44 篇舊文（2015–2021 WordPress 期）的 h3 標題寫死
   inline color:#ff6600 純橘——同時踩到火色（八字忌神）、對比
   不足（3.0）、與品牌無關三條。另有系列文帶 #B4551F 火色。
   原始碼正在逐篇清理，這一節先把視覺攔下來，清完可以移除。
   ⚠️ 這是過渡措施不是解法：真正的修正在文章 HTML 裡。 */
div.content #pjax-container [style*="ff6600" i],
div.content #pjax-container [style*="ff6600" i] * {
  color: var(--hl-ink) !important;
}
div.content #pjax-container [style*="B4551F" i]:not([style*="border" i]) {
  color: var(--hl-teal) !important;
}

}