/* ============================================================================
 * narsil-bootstrap-theme.css
 * Narsil 專案的 Bootstrap 5.3 主題層（Bootstrap Theme Bridge Layer）
 * ----------------------------------------------------------------------------
 * 目的（Purpose）
 *   把 Narsil CIS 的品牌 token（`--narsil-*`，由 /_assets/narsil-tokens.css 提供）
 *   對映到 Bootstrap 5.3 的 CSS 變數（`--bs-*`），讓 Bootstrap 的 reboot、grid、
 *   utilities、components 全部直接長出 Narsil 的樣子。
 *
 *   本檔是「Bootstrap 官方建議的 CSS 變數客製途徑」（Customize → CSS variables），
 *   不改動 bootstrap.min.css 本體，也不再另外維護一套自有的元件框架。
 *
 * 載入順序（強制，順序錯了顏色會回到 Bootstrap 預設藍）
 *   1. /local_assets/vendor/bootstrap-5.3.8/css/bootstrap.min.css   ← 框架本體
 *   2. /_assets/narsil-tokens.css                                    ← 品牌 token 值
 *   3. /local_assets/css/shared/narsil-bootstrap-theme.css           ← 本檔（橋接）
 *   4. /local_assets/css/pages/<page>.css                            ← 各頁專屬樣式
 *
 * 主題切換（Color mode）
 *   Narsil token 走 `data-theme`，Bootstrap 走 `data-bs-theme`。
 *   本專案一律「兩個屬性同時標在 <html> 上、同時切換」：
 *       <html data-theme="light" data-bs-theme="light">
 *   顏色值本身由 `var(--narsil-*)` 供給，所以實際上是 `data-theme` 在決定顏色；
 *   `data-bs-theme` 負責 Bootstrap 自己的 color-scheme 與內建深色規則。
 *
 * 為什麼有些變數必須寫死數值
 *   Bootstrap 的 `.text-*` / `.bg-*` / `.border-*` utilities 與 alpha 疊色是用
 *   `rgba(var(--bs-*-rgb), var(--bs-*-opacity))` 組出來的，`*-rgb` 必須是
 *   「R, G, B」三個數字，無法從 `var(--narsil-*)` 的 hex 推導，因此逐一寫死。
 *   數值全部來自 /_assets/narsil-tokens.css，不是另外調出來的顏色。
 *
 * 依賴：Bootstrap v5.3.8 · Narsil CIS v1.0.0
 * ========================================================================== */


/* ============================================================================
 * 1. 全域 token 橋接（淺色，本站預設）
 * ========================================================================== */

:root,
[data-bs-theme="light"] {

  /* ---- 字體 ------------------------------------------------------------- */
  --bs-font-sans-serif:   var(--narsil-font-sans);
  --bs-font-monospace:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --bs-body-font-family:  var(--narsil-font-sans);
  /* 內文 17px。16px 是拉丁文的下限；中文筆劃更密，同樣尺寸更難讀，
     因此基準往上一級。行高由 --bs-body-line-height 提供 CJK 需要的 1.75。 */
  --bs-body-font-size:    1.0625rem;
  --bs-body-font-weight:  var(--narsil-weight-regular);
  --bs-body-line-height:  var(--narsil-leading-relaxed);

  /* Narsil 專屬：標題字體。Bootstrap 沒有這顆變數，由本檔的 h1–h6 規則消費 */
  --narsil-bs-heading-font-family: var(--narsil-font-heading);

  /* ---- 文字與底色 ------------------------------------------------------- */
  --bs-body-color:            var(--narsil-text-primary);
  --bs-body-color-rgb:        54, 57, 60;          /* graphite-800 #36393C */
  --bs-body-bg:               var(--narsil-bg-canvas);
  --bs-body-bg-rgb:           250, 246, 240;       /* ivory #FAF6F0 */

  --bs-emphasis-color:        var(--narsil-ink);
  --bs-emphasis-color-rgb:    21, 20, 16;          /* ink #151410 */

  --bs-secondary-color:       var(--narsil-text-secondary);
  --bs-secondary-color-rgb:   85, 88, 92;          /* graphite-700 #55585C */
  --bs-secondary-bg:          var(--narsil-graphite-100);
  --bs-secondary-bg-rgb:      233, 235, 238;       /* graphite-100 #E9EBEE */

  --bs-tertiary-color:        var(--narsil-text-muted);
  --bs-tertiary-color-rgb:    110, 114, 119;       /* graphite-600 #6E7277 */
  --bs-tertiary-bg:           var(--narsil-graphite-50);
  --bs-tertiary-bg-rgb:       245, 247, 249;       /* graphite-50 #F5F7F9 */

  --bs-heading-color:         var(--narsil-text-primary);

  /* ---- 連結 ------------------------------------------------------------- */
  --bs-link-color:            var(--narsil-accent);
  --bs-link-color-rgb:        140, 98, 57;         /* bronze-deep #8C6239 */
  --bs-link-hover-color:      var(--narsil-accent-hover);
  --bs-link-hover-color-rgb:  115, 80, 40;         /* bronze-700 #735028 */
  --bs-link-decoration:       underline;
  --bs-link-underline-opacity: 0.4;

  /* ---- 語意色（Bootstrap 的 theme colors） -------------------------------
   * primary = Narsil 的單一金屬邊（accent）；Narsil 的品牌深色改掛 secondary。
   * ---------------------------------------------------------------------- */
  --bs-primary:               var(--narsil-accent);
  --bs-primary-rgb:           140, 98, 57;
  --bs-secondary:             var(--narsil-graphite-800);
  --bs-secondary-rgb:         54, 57, 60;
  --bs-success:               #1E7A44;
  --bs-success-rgb:           30, 122, 68;
  --bs-info:                  var(--narsil-status-info);
  --bs-info-rgb:              59, 130, 246;
  --bs-warning:               var(--narsil-amber);
  --bs-warning-rgb:           255, 171, 64;
  --bs-danger:                var(--narsil-status-danger);
  --bs-danger-rgb:            217, 48, 37;
  --bs-light:                 var(--narsil-ivory);
  --bs-light-rgb:             250, 246, 240;
  --bs-dark:                  var(--narsil-graphite-950);
  --bs-dark-rgb:              25, 27, 28;

  /* subtle 三聯（.text-*-emphasis / .bg-*-subtle / .border-*-subtle） */
  --bs-primary-text-emphasis:   var(--narsil-bronze-700);
  --bs-primary-bg-subtle:       var(--narsil-bronze-50);
  --bs-primary-border-subtle:   var(--narsil-bronze-100);
  --bs-secondary-text-emphasis: var(--narsil-graphite-700);
  --bs-secondary-bg-subtle:     var(--narsil-graphite-50);
  --bs-secondary-border-subtle: var(--narsil-graphite-200);
  --bs-info-text-emphasis:      #1D4ED8;
  --bs-info-bg-subtle:          var(--narsil-slate-50);
  --bs-info-border-subtle:      var(--narsil-slate-200);
  --bs-danger-text-emphasis:    #8E1D16;
  --bs-danger-bg-subtle:        #FBE7E5;
  --bs-danger-border-subtle:    #F2C3BF;
  --bs-light-bg-subtle:         var(--narsil-graphite-50);
  --bs-dark-bg-subtle:          var(--narsil-graphite-200);

  /* ---- 程式碼與標記 ----------------------------------------------------- */
  --bs-code-color:      var(--narsil-accent-hover);
  --bs-highlight-color: var(--narsil-text-primary);
  --bs-highlight-bg:    var(--narsil-bronze-100);

  /* ---- 邊框、圓角、陰影 ------------------------------------------------- */
  --bs-border-width:  var(--narsil-border-width-hairline);
  --bs-border-color:  var(--narsil-border-default);
  --bs-border-color-translucent: rgba(21, 20, 16, 0.14);

  --bs-border-radius:      var(--narsil-radius-md);
  --bs-border-radius-sm:   var(--narsil-radius-sm);
  --bs-border-radius-lg:   var(--narsil-radius-lg);
  --bs-border-radius-xl:   var(--narsil-radius-xl);
  --bs-border-radius-xxl:  var(--narsil-radius-2xl);
  --bs-border-radius-pill: var(--narsil-radius-full);

  --bs-box-shadow:     var(--narsil-shadow-md);
  --bs-box-shadow-sm:  var(--narsil-shadow-sm);
  --bs-box-shadow-lg:  var(--narsil-shadow-lg);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(21, 20, 16, 0.14);

  /* ---- 焦點框（鍵盤操作可見度） ----------------------------------------- */
  --bs-focus-ring-width:   3px;
  --bs-focus-ring-opacity: 0.35;
  --bs-focus-ring-color:   rgba(140, 98, 57, 0.35);
}


/* ============================================================================
 * 2. 深色模式
 *    Narsil 深色的 accent 由 bronze-deep 換成 gold（#CC9E6C），
 *    因此所有以 accent 為基底的 rgb 三元組要跟著換。
 * ========================================================================== */

[data-bs-theme="dark"] {
  --bs-body-color-rgb:        250, 246, 240;   /* ivory */
  --bs-body-bg-rgb:            25,  27,  28;   /* graphite-950 */
  --bs-emphasis-color:        var(--narsil-white);
  --bs-emphasis-color-rgb:    255, 255, 255;
  --bs-secondary-color-rgb:   226, 221, 215;   /* cream */
  --bs-secondary-bg:          var(--narsil-graphite-800);
  --bs-secondary-bg-rgb:       54,  57,  60;
  --bs-tertiary-color-rgb:    160, 165, 170;   /* graphite-400 */
  --bs-tertiary-bg:           var(--narsil-graphite-900);
  --bs-tertiary-bg-rgb:        44,  46,  48;

  --bs-link-color-rgb:        204, 158, 108;   /* gold #CC9E6C */
  --bs-link-hover-color-rgb:  255, 171,  64;   /* amber #FFAB40 */

  --bs-primary-rgb:           204, 158, 108;
  --bs-secondary:             var(--narsil-graphite-200);
  --bs-secondary-rgb:         212, 216, 219;
  --bs-light:                 var(--narsil-graphite-800);
  --bs-light-rgb:              54,  57,  60;
  --bs-dark:                  var(--narsil-ivory);
  --bs-dark-rgb:              250, 246, 240;

  --bs-primary-text-emphasis:   var(--narsil-bronze-100);
  --bs-primary-bg-subtle:       var(--narsil-bronze-900);
  --bs-primary-border-subtle:   var(--narsil-bronze-700);
  --bs-secondary-text-emphasis: var(--narsil-graphite-200);
  --bs-secondary-bg-subtle:     var(--narsil-graphite-900);
  --bs-secondary-border-subtle: var(--narsil-graphite-700);
  --bs-info-bg-subtle:          var(--narsil-slate-950);
  --bs-info-border-subtle:      var(--narsil-slate-800);
  --bs-danger-bg-subtle:        #3A1512;
  --bs-danger-border-subtle:    #7A231B;
  --bs-light-bg-subtle:         var(--narsil-graphite-900);
  --bs-dark-bg-subtle:          var(--narsil-graphite-800);

  --bs-border-color-translucent: rgba(250, 246, 240, 0.16);
  --bs-focus-ring-color:         rgba(204, 158, 108, 0.40);

  --bs-code-color:    var(--narsil-bronze-100);
  --bs-highlight-bg:  var(--narsil-bronze-800);
}


/* ============================================================================
 * 3. 版式基礎（在 Bootstrap Reboot 之上補 Narsil 的字體階層）
 * ========================================================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--narsil-bs-heading-font-family);
  font-weight: var(--narsil-weight-bold);
  letter-spacing: var(--narsil-tracking-tight);
  line-height: var(--narsil-leading-tight);
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: var(--narsil-bs-heading-font-family);
  font-weight: var(--narsil-weight-extrabold);
  letter-spacing: var(--narsil-tracking-tighter);
}

/* 品牌時刻專用的 heritage serif。整頁最多用一次，不可拿來排內文。 */
.narsil-display-serif {
  font-family: var(--narsil-font-display);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-normal);
}

.lead {
  font-size: var(--narsil-text-lg);
  font-weight: var(--narsil-weight-regular);
  line-height: var(--narsil-leading-relaxed);
  color: var(--bs-secondary-color);
}

/* CJK 內文需要比拉丁文更鬆的行距。這件事由 --bs-body-line-height 提供
   （Bootstrap 會把它套在 body 上），不要寫成 :lang(...) 選擇器——
   :lang() 的特異度是 (0,1,0)，會套到頁面上「每一個」元素並蓋掉 body 的設定，
   讓所有頁面樣式自訂的行高全部失效。 */

hr { border-top-color: var(--bs-border-color); opacity: 1; }

code, kbd, samp, pre { font-family: var(--bs-font-monospace); }


/* ============================================================================
 * 4. 元件變數覆寫
 *    Bootstrap 每個元件都把自己的可調值開成區域 CSS 變數，官方建議就從這裡改。
 * ========================================================================== */

/* ---- 4.1 按鈕 ------------------------------------------------------------ */

.btn {
  --bs-btn-font-family: var(--narsil-font-heading);
  --bs-btn-font-weight: var(--narsil-weight-semibold);
  --bs-btn-border-radius: var(--narsil-radius-md);
  letter-spacing: var(--narsil-tracking-wide);
}

.btn-primary {
  --bs-btn-color:              var(--narsil-accent-contrast);
  --bs-btn-bg:                 var(--narsil-accent);
  --bs-btn-border-color:       var(--narsil-accent);
  --bs-btn-hover-color:        var(--narsil-accent-contrast);
  --bs-btn-hover-bg:           var(--narsil-accent-hover);
  --bs-btn-hover-border-color: var(--narsil-accent-hover);
  --bs-btn-active-color:       var(--narsil-accent-contrast);
  --bs-btn-active-bg:          var(--narsil-accent-hover);
  --bs-btn-active-border-color: var(--narsil-accent-hover);
  --bs-btn-disabled-color:     var(--narsil-accent-contrast);
  --bs-btn-disabled-bg:        var(--narsil-accent);
  --bs-btn-disabled-border-color: var(--narsil-accent);
  --bs-btn-focus-shadow-rgb:   140, 98, 57;
}

[data-bs-theme="dark"] .btn-primary { --bs-btn-focus-shadow-rgb: 204, 158, 108; }

.btn-outline-primary {
  --bs-btn-color:              var(--narsil-accent);
  --bs-btn-border-color:       var(--narsil-accent);
  --bs-btn-hover-color:        var(--narsil-accent-contrast);
  --bs-btn-hover-bg:           var(--narsil-accent);
  --bs-btn-hover-border-color: var(--narsil-accent);
  --bs-btn-active-color:       var(--narsil-accent-contrast);
  --bs-btn-active-bg:          var(--narsil-accent-hover);
  --bs-btn-active-border-color: var(--narsil-accent-hover);
  --bs-btn-disabled-color:     var(--narsil-accent);
  --bs-btn-disabled-border-color: var(--narsil-accent);
  --bs-btn-focus-shadow-rgb:   140, 98, 57;
}

.btn-secondary {
  --bs-btn-color:              var(--narsil-text-inverse);
  --bs-btn-bg:                 var(--narsil-graphite-800);
  --bs-btn-border-color:       var(--narsil-graphite-800);
  --bs-btn-hover-color:        var(--narsil-text-inverse);
  --bs-btn-hover-bg:           var(--narsil-graphite-900);
  --bs-btn-hover-border-color: var(--narsil-graphite-900);
  --bs-btn-active-color:       var(--narsil-text-inverse);
  --bs-btn-active-bg:          var(--narsil-graphite-950);
  --bs-btn-active-border-color: var(--narsil-graphite-950);
  --bs-btn-focus-shadow-rgb:   54, 57, 60;
}

.btn-outline-secondary {
  --bs-btn-color:              var(--narsil-text-primary);
  --bs-btn-border-color:       var(--narsil-border-strong);
  --bs-btn-hover-color:        var(--narsil-text-inverse);
  --bs-btn-hover-bg:           var(--narsil-bg-inverse);
  --bs-btn-hover-border-color: var(--narsil-bg-inverse);
  --bs-btn-active-color:       var(--narsil-text-inverse);
  --bs-btn-active-bg:          var(--narsil-bg-inverse);
  --bs-btn-active-border-color: var(--narsil-bg-inverse);
  --bs-btn-focus-shadow-rgb:   54, 57, 60;
}

/* 深色底上的次要動作（hero、CTA band、footer 用） */
.btn-outline-light {
  --bs-btn-color:              var(--narsil-ivory);
  --bs-btn-border-color:       rgba(250, 246, 240, 0.45);
  --bs-btn-hover-color:        var(--narsil-graphite-950);
  --bs-btn-hover-bg:           var(--narsil-ivory);
  --bs-btn-hover-border-color: var(--narsil-ivory);
  --bs-btn-active-color:       var(--narsil-graphite-950);
  --bs-btn-active-bg:          var(--narsil-cream);
  --bs-btn-active-border-color: var(--narsil-cream);
  --bs-btn-focus-shadow-rgb:   250, 246, 240;
}

.btn-link {
  --bs-btn-color:        var(--narsil-accent);
  --bs-btn-hover-color:  var(--narsil-accent-hover);
  --bs-btn-focus-shadow-rgb: 140, 98, 57;
}

/* 尺寸階：沿用 Bootstrap 的元件，字級與控制項高度改用 Narsil 的比例。
   Bootstrap 預設 .btn-lg 是 1.25rem（20px），在本站的版式中過大。 */
.btn {
  --bs-btn-font-size:  var(--narsil-text-sm);
  --bs-btn-padding-y:  0.5rem;
  --bs-btn-padding-x:  var(--narsil-space-5);
  --bs-btn-line-height: var(--narsil-leading-normal);
  min-height: 2.5rem;
}

.btn-lg {
  --bs-btn-font-size:  var(--narsil-text-sm);
  --bs-btn-padding-y:  0.75rem;
  --bs-btn-padding-x:  var(--narsil-space-7);
  --bs-btn-border-radius: var(--narsil-radius-md);
  min-height: 3rem;
}

.btn-sm {
  --bs-btn-font-size:  var(--narsil-text-xs);
  --bs-btn-padding-y:  0.25rem;
  --bs-btn-padding-x:  var(--narsil-space-4);
  --bs-btn-border-radius: var(--narsil-radius-sm);
  min-height: 2rem;
}

/* ---- 4.2 卡片 ------------------------------------------------------------ */

.card {
  --bs-card-bg:            var(--narsil-bg-surface);
  --bs-card-color:         var(--narsil-text-primary);
  --bs-card-border-color:  var(--narsil-border-default);
  --bs-card-border-radius: var(--narsil-radius-lg);
  --bs-card-inner-border-radius: calc(var(--narsil-radius-lg) - 1px);
  --bs-card-cap-bg:        var(--narsil-graphite-50);
  --bs-card-cap-color:     var(--narsil-text-primary);
  --bs-card-spacer-x:      var(--narsil-space-6);
  --bs-card-spacer-y:      var(--narsil-space-6);
  --bs-card-title-color:   var(--narsil-text-primary);
  --bs-card-subtitle-color: var(--narsil-text-muted);
}

[data-bs-theme="dark"] .card { --bs-card-cap-bg: var(--narsil-graphite-800); }

/* ---- 4.3 導覽列 / 導覽 --------------------------------------------------- */

.navbar {
  --bs-navbar-color:        var(--narsil-text-secondary);
  --bs-navbar-hover-color:  var(--narsil-accent);
  --bs-navbar-active-color: var(--narsil-accent);
  --bs-navbar-brand-color:  var(--narsil-text-primary);
  --bs-navbar-brand-hover-color: var(--narsil-text-primary);
  --bs-navbar-toggler-border-color: var(--narsil-border-default);
  --bs-navbar-toggler-focus-width:  3px;
  --bs-navbar-padding-y:    var(--narsil-space-3);
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-medium);
}

.nav {
  --bs-nav-link-color:       var(--narsil-text-secondary);
  --bs-nav-link-hover-color: var(--narsil-accent);
  --bs-nav-link-font-weight: var(--narsil-weight-medium);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--narsil-accent);
  --bs-nav-pills-link-active-color: var(--narsil-accent-contrast);
  --bs-nav-pills-border-radius: var(--narsil-radius-md);
}

.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--narsil-text-primary);
  --bs-nav-tabs-link-active-bg: var(--narsil-bg-surface);
  --bs-nav-tabs-border-color: var(--narsil-border-default);
}

/* ---- 4.4 表格 ------------------------------------------------------------ */

.table {
  --bs-table-color:        var(--narsil-text-primary);
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--narsil-border-subtle);
  --bs-table-striped-bg:   var(--narsil-graphite-50);
  --bs-table-striped-color: var(--narsil-text-primary);
  --bs-table-hover-bg:     var(--narsil-bronze-50);
  --bs-table-hover-color:  var(--narsil-text-primary);
  --bs-table-accent-bg:    transparent;
  font-variant-numeric: tabular-nums;
}

[data-bs-theme="dark"] .table {
  --bs-table-striped-bg: var(--narsil-graphite-900);
  --bs-table-hover-bg:   var(--narsil-graphite-800);
}

.table > thead {
  --bs-table-color: var(--narsil-text-primary);
}

.table > thead th {
  font-family: var(--narsil-font-heading);
  font-size: var(--narsil-text-xs);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-wider);
  text-transform: uppercase;
  /* 表頭標籤是 12px 小字，text-muted（graphite-600）在 ivory 底上只有 4.4996:1，
     差 0.0004 未達 AA 4.5。改用 text-secondary（graphite-700，6.64:1）留出餘裕。
     大寫 + 字距 + 小字級已足以表達「這是標籤」，不必再靠壓低對比。 */
  color: var(--narsil-text-secondary);
  border-bottom-width: var(--narsil-border-width-thick);
  border-bottom-color: var(--narsil-border-strong);
}

/* ---- 4.5 表單 ------------------------------------------------------------ */

.form-control,
.form-select {
  background-color: var(--narsil-bg-surface);
  border-color: var(--narsil-border-default);
  color: var(--narsil-text-primary);
  border-radius: var(--narsil-radius-md);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--narsil-bg-surface);
  border-color: var(--narsil-accent);
  color: var(--narsil-text-primary);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.form-control::placeholder { color: var(--narsil-text-muted); }

.form-label {
  font-family: var(--narsil-font-heading);
  font-size: var(--narsil-text-sm);
  font-weight: var(--narsil-weight-semibold);
  color: var(--narsil-text-secondary);
}

.form-check-input:checked {
  background-color: var(--narsil-accent);
  border-color: var(--narsil-accent);
}

.input-group-text {
  background-color: var(--narsil-graphite-50);
  border-color: var(--narsil-border-default);
  color: var(--narsil-text-secondary);
}

/* ---- 4.6 下拉選單 / 折疊 / 手風琴 ---------------------------------------- */

.dropdown-menu {
  --bs-dropdown-bg:              var(--narsil-bg-surface);
  --bs-dropdown-color:           var(--narsil-text-primary);
  --bs-dropdown-border-color:    var(--narsil-border-default);
  --bs-dropdown-border-radius:   var(--narsil-radius-lg);
  --bs-dropdown-box-shadow:      var(--narsil-shadow-lg);
  --bs-dropdown-link-color:      var(--narsil-text-secondary);
  --bs-dropdown-link-hover-color: var(--narsil-accent);
  --bs-dropdown-link-hover-bg:   var(--narsil-bronze-50);
  --bs-dropdown-link-active-color: var(--narsil-accent-contrast);
  --bs-dropdown-link-active-bg:  var(--narsil-accent);
  --bs-dropdown-header-color:    var(--narsil-text-muted);
  --bs-dropdown-zindex:          var(--narsil-z-dropdown);
}

[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-link-hover-bg: var(--narsil-graphite-800); }

.accordion {
  --bs-accordion-bg:               var(--narsil-bg-surface);
  --bs-accordion-color:            var(--narsil-text-primary);
  --bs-accordion-border-color:     var(--narsil-border-default);
  --bs-accordion-border-radius:    var(--narsil-radius-lg);
  --bs-accordion-btn-color:        var(--narsil-text-primary);
  --bs-accordion-btn-bg:           var(--narsil-bg-surface);
  --bs-accordion-active-color:     var(--narsil-accent);
  --bs-accordion-active-bg:        var(--narsil-bronze-50);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

[data-bs-theme="dark"] .accordion { --bs-accordion-active-bg: var(--narsil-graphite-800); }

.accordion-button {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-semibold);
}

/* ---- 4.7 清單 / 提示 / 標籤 ---------------------------------------------- */

.list-group {
  --bs-list-group-bg:            var(--narsil-bg-surface);
  --bs-list-group-color:         var(--narsil-text-primary);
  --bs-list-group-border-color:  var(--narsil-border-subtle);
  --bs-list-group-border-radius: var(--narsil-radius-lg);
  --bs-list-group-action-hover-bg: var(--narsil-bronze-50);
  --bs-list-group-action-hover-color: var(--narsil-text-primary);
  --bs-list-group-active-bg:     var(--narsil-accent);
  --bs-list-group-active-border-color: var(--narsil-accent);
  --bs-list-group-active-color:  var(--narsil-accent-contrast);
}

[data-bs-theme="dark"] .list-group { --bs-list-group-action-hover-bg: var(--narsil-graphite-800); }

.alert {
  --bs-alert-border-radius: var(--narsil-radius-lg);
  border-left-width: var(--narsil-border-width-heavy);
}

.badge {
  font-family: var(--narsil-font-heading);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-wide);
}

.progress {
  --bs-progress-bg:     var(--narsil-graphite-100);
  --bs-progress-bar-bg: var(--narsil-accent);
  --bs-progress-border-radius: var(--narsil-radius-full);
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--narsil-text-muted);
  --bs-breadcrumb-item-active-color: var(--narsil-text-primary);
}

/* ---- 4.8 疊層（Modal / Offcanvas / Tooltip） ----------------------------- */

.modal {
  --bs-modal-bg:           var(--narsil-bg-surface);
  --bs-modal-color:        var(--narsil-text-primary);
  --bs-modal-border-color: var(--narsil-border-default);
  --bs-modal-border-radius: var(--narsil-radius-xl);
  --bs-modal-header-border-color: var(--narsil-border-subtle);
  --bs-modal-footer-border-color: var(--narsil-border-subtle);
  --bs-modal-zindex:       var(--narsil-z-modal);
}

.offcanvas, .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom {
  --bs-offcanvas-bg:           var(--narsil-bg-surface);
  --bs-offcanvas-color:        var(--narsil-text-primary);
  --bs-offcanvas-border-color: var(--narsil-border-default);
  --bs-offcanvas-zindex:       var(--narsil-z-overlay);
}

.tooltip { --bs-tooltip-bg: var(--narsil-graphite-950); --bs-tooltip-color: var(--narsil-ivory); }
.popover { --bs-popover-bg: var(--narsil-bg-surface); --bs-popover-border-color: var(--narsil-border-default); }


/* ============================================================================
 * 5. Narsil 專屬元件
 *    只放「Bootstrap 沒有對應品項」的東西。凡是 Bootstrap 已經有的
 *    （容器、格線、按鈕、卡片、表格、間距、對齊…）一律用 Bootstrap 的，
 *    不在這裡另外造一份。
 * ========================================================================== */

/* ---- 5.1 Eyebrow：段落上方的小標，帶一段金屬短線 ------------------------ */

.narsil-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--narsil-space-2);
  font-family: var(--narsil-font-heading);
  font-size: var(--narsil-text-xs);
  font-weight: var(--narsil-weight-semibold);
  letter-spacing: var(--narsil-tracking-widest);
  text-transform: uppercase;
  color: var(--narsil-accent);
  margin-bottom: var(--narsil-space-3);
}

.narsil-eyebrow::before {
  content: "";
  inline-size: var(--narsil-space-6);
  block-size: var(--narsil-border-width-thick);
  background: var(--narsil-accent);
  flex: none;
}

.narsil-eyebrow--inverse { color: var(--narsil-gold); }
.narsil-eyebrow--inverse::before { background: var(--narsil-gold); }

/* ---- 5.2 品牌標誌 -------------------------------------------------------- */

.narsil-brand-logo {
  display: block;
  block-size: auto;
  max-inline-size: 100%;
}

/* 淺色底放預設標、深色底放 -inverse 標；主題一切換就互換 */
.narsil-brand-logo--inverse { display: none; }
[data-bs-theme="dark"] .narsil-brand-logo--default { display: none; }
[data-bs-theme="dark"] .narsil-brand-logo--inverse { display: block; }

/* ---- 5.3 四芒星火花（品牌記號） ------------------------------------------ */

.narsil-spark {
  display: inline-block;
  inline-size: 0.5em;
  block-size: 0.5em;
  background: var(--narsil-accent);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
  vertical-align: middle;
  flex: none;
}

/* ---- 5.4 深色品牌帶（hero / CTA band / footer 的共同底） ----------------- */

.narsil-band-dark {
  background: var(--narsil-graphite-950);
  color: var(--narsil-ivory);
}

.narsil-band-dark h1, .narsil-band-dark h2, .narsil-band-dark h3,
.narsil-band-dark h4, .narsil-band-dark h5, .narsil-band-dark h6 { color: var(--narsil-ivory); }

.narsil-band-dark p, .narsil-band-dark .lead { color: var(--narsil-cream); }

/* ============================================================================
 * 6. 無障礙與動效
 * ========================================================================== */

:focus-visible {
  outline: var(--narsil-border-width-thick) solid var(--narsil-focus-ring);
  outline-offset: 2px;
}

/* 圖片一律等比縮放：HTML 上的 width/height 只負責預留長寬比，不鎖死尺寸 */
img { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}