/* ═══════════════════════════════════════════════════════════════
   齊到 AllTao — 品牌層 token（brand.css）
   依據：00_Lab_Center/商轉計畫/品牌視覺企劃_齊到_20260902.md
        （定案總表、§2 配色暖版、§4 字體、§6 應用規範、§7 署名規範）

   用法：載在 zen.css 之後。本檔只做「品牌皮」——色票、字體、
        logo 相關的小元件；不改版面、不改元件結構。
   範圍：13 個對外頁 ＋ member.html ＋ admin/（Round 1）；
        Round 2 起再加五支免登入殼頁（o／s／scan／fee）與
        三個 app（app/report・flow・score）——app 的識別色指派寫在各自
        <style id="qd-brand"> 區塊，色值一律 var() 取自本檔，不另立色票。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── 品牌色票（§2 暖版，2026-09-02 Jett 拍板）── */
  --qd-ink-slate:   #2F4858;  /* 靛墨：主色，字標／標題／導覽列；報點識別色 */
  --qd-deep-slate:  #1E3038;  /* 深墨：深色底、頁尾、投影看板底 */
  --qd-warm:        #E07A2F;  /* 暖橙：圖形與狀態強調。不當文字色、不當按鈕底 */
  --qd-action:      #B5561A;  /* 深橙：主按鈕底、連結、可點文字（白字 4.9:1）*/
  --qd-action-deep: #933F0F;  /* 衍生：深橙的 hover／pressed */
  --qd-teal:        #2A9D8F;  /* 青碧：即時同步、成功、出席率；積分識別色 */
  --qd-gold:        #D4A03C;  /* 暖金：頒獎、創始會員、金額數字；流程識別色 */
  --qd-paper:       #F7F2EA;  /* 米白：頁面底 */
  --qd-graphite:    #2B2F36;  /* 石墨：內文 */
  --qd-mist:        #8A8F98;  /* 霧灰：框線旁的弱文字／disabled（對米白 2.9:1，不放正文）*/
  --qd-line:        #E3DCD0;  /* 框線 */

  /* ── 深色模式色票（§2；本站尚無切換開關，掛 [data-theme="dark"] 才生效）── */
  --qd-dk-bg:       #141C22;  /* 底 */
  --qd-dk-surface:  #1E2A32;  /* 面 */
  --qd-dk-text:     #E9E6E0;  /* 內文 */
  --qd-dk-slate:    #9CC3D0;  /* 靛墨提亮 */
  --qd-dk-warm:     #F29A5C;  /* 橙提亮（深底上對比足夠，可直接當按鈕）*/

  /* ── 字體（§4）── */
  --qd-font-tc:  'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --qd-font-en:  'Manrope';
  --qd-font-kai: 'LXGW WenKai TC','Noto Sans TC',serif;   /* 只給「修心之道出品」署名 */
  --qd-font-ui:  'Manrope','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;

  /* ── 衍生色（品牌企劃未列，由上表推導；用途註記在後）── */
  --qd-paper-warm: #EFE7DA;  /* 米白的區塊交替底 */
  --qd-slate-mist: #E4EBEE;  /* 靛墨淡底：chip／icon 座／hover 底 */
  --qd-ink-soft:   #5C636D;  /* 次要文字：霧灰對米白僅 2.9:1，正文用這個（6.3:1）*/

  /* ── 覆寫 zen.css 的既有 token（改值不改語意，全站元件自動換皮）── */
  --paper:      var(--qd-paper);
  --paper-warm: var(--qd-paper-warm);
  --ink:        var(--qd-graphite);
  --ink-soft:   var(--qd-ink-soft);
  --pine:       var(--qd-ink-slate);   /* 原松綠主色 → 靛墨 */
  --pine-deep:  var(--qd-deep-slate);
  --pine-mist:  var(--qd-slate-mist);
  --gold:       var(--qd-warm);        /* 原茶金 → 暖橙（僅圖形／裝飾）*/
  --gold-ink:   var(--qd-action);      /* 原茶金小字 → 深橙（可點文字）*/
  --line:       var(--qd-line);
  --shadow:      0 8px 32px rgba(47,72,88,.07);
  --shadow-lift: 0 16px 44px rgba(47,72,88,.12);
}

/* ── 字體套用（§4：中文 Noto Sans TC、英數 Manrope、數字 tabular）── */
body{ font-family:var(--qd-font-ui); font-variant-numeric:tabular-nums; }

/* 標題：原本吃 Noto Serif TC，改 Noto Sans TC（Black 由既有 font-black 決定），字距 −0.02em */
.serif{ font-family:var(--qd-font-ui); letter-spacing:-.02em; }
.ft-brand b{ font-family:var(--qd-font-ui); letter-spacing:-.02em; }

/* 頁內 <style> 寫死 Noto Serif TC 的四處（help ×3、admin ×1）；
   頁內樣式在 brand.css 之後載入，同權重會贏，故用 !important 收口 */
.ic-t,.help-doc h2,.help-part,.stat-card .sc-v{
  font-family:var(--qd-font-ui)!important; letter-spacing:-.02em;
}

/* ── 署名（§7）：「齊到，修心之道出品。」純文字楷體，≤ 字標高的 50% ── */
.qd-sign{
  font-family:var(--qd-font-kai);
  font-size:.9rem; font-weight:400; letter-spacing:.04em; line-height:1.9;
  margin-top:.55rem;
}
.z-footer .qd-sign{ color:rgba(247,242,234,.78) }

/* ── 按鈕與可點文字＝深橙（§2：暖橙不當按鈕底、不當文字色）── */
.z-btn{ background:var(--qd-action); border-color:var(--qd-action); color:#fff }
.z-btn:hover{ background:var(--qd-action-deep); border-color:var(--qd-action-deep); color:#fff }
.z-btn--ghost{ background:transparent; color:var(--qd-action); border-color:var(--qd-action) }
.z-btn--ghost:hover{ background:#F6E7DC; color:var(--qd-action-deep) }
.z-link{ color:var(--qd-action) }
.z-link:hover{ color:var(--qd-action-deep) }
.nav-item:hover{ color:var(--qd-action) }
.nav-item.is-active{ color:var(--qd-action) }

/* ── 頁尾＝深墨底（§2；zen.css 原本吃 var(--ink)＝內文色）── */
.z-footer{ background:var(--qd-deep-slate) }

/* ── Hero 背景暈染：原本寫死松綠／茶金 rgba，換成靛墨／暖橙 ── */
.hero-wash{
  background:
    radial-gradient(640px 420px at 82% -8%, rgba(47,72,88,.10), transparent 70%),
    radial-gradient(520px 380px at 4% 34%, rgba(224,122,47,.07), transparent 70%);
}

/* ── 導覽列字標（§6：橫式字標，最小高 24px）── */
.qd-logo{ display:block; height:36px; width:auto }
.z-footer .qd-logo{ height:40px }
/* ── 一行式細頁尾（scan／fee 看板頁：只留字標一條，Jett 2026-09-06）── */
.z-footer--line{ padding:.4rem 0; display:flex; align-items:center; justify-content:center }
.z-footer--line .qd-logo{ height:20px }
@media(max-width:480px){ .z-footer--line .qd-logo{ height:18px } }
@media(max-width:480px){ .qd-logo{ height:30px } }

/* ═══ 深色模式（§2 色票齊全；本站無切換開關，
       掛 <html data-theme="dark"> 才生效，預設不啟用）═══ */
:root[data-theme="dark"]{
  --qd-paper:      var(--qd-dk-bg);
  --qd-graphite:   var(--qd-dk-text);
  --qd-paper-warm: var(--qd-dk-surface);
  --qd-slate-mist: #23343E;
  --qd-ink-soft:   #A9B2B8;
  --qd-line:       #2C3B45;
  --paper:      var(--qd-dk-bg);
  --paper-warm: var(--qd-dk-surface);
  --ink:        var(--qd-dk-text);
  --ink-soft:   #A9B2B8;
  --pine:       var(--qd-dk-slate);
  --pine-deep:  #BCD8E1;
  --pine-mist:  #23343E;
  --gold:       var(--qd-dk-warm);
  --gold-ink:   var(--qd-dk-warm);
  --line:       #2C3B45;
  --shadow:      0 8px 32px rgba(0,0,0,.45);
  --shadow-lift: 0 16px 44px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body{ background:var(--qd-dk-bg); color:var(--qd-dk-text) }
:root[data-theme="dark"] .z-card{ background:var(--qd-dk-surface); border-color:#2C3B45 }
:root[data-theme="dark"] .z-btn{ background:var(--qd-dk-warm); border-color:var(--qd-dk-warm); color:#1B1208 }
:root[data-theme="dark"] .z-btn:hover{ background:#FFB07A; border-color:#FFB07A; color:#1B1208 }
:root[data-theme="dark"] .z-btn--ghost{ background:transparent; color:var(--qd-dk-warm); border-color:var(--qd-dk-warm) }
:root[data-theme="dark"] .z-link,
:root[data-theme="dark"] .nav-item:hover,
:root[data-theme="dark"] .nav-item.is-active{ color:var(--qd-dk-warm) }
:root[data-theme="dark"] .z-nav{ background:rgba(20,28,34,.88) }
:root[data-theme="dark"] .z-footer{ background:#0F161B }
/* 深色底要用反白字標（§3）；CSS content 換圖，markup 不動 */
:root[data-theme="dark"] .z-nav .qd-logo{ content:url('/assets/brand/qidao-logo-h-white.svg') }
:root[data-theme="dark"] img[data-qd="logo-v"]{ content:url('/assets/brand/qidao-logo-v-white.svg') }
:root[data-theme="dark"] .hero-wash{
  background:
    radial-gradient(640px 420px at 82% -8%, rgba(156,195,208,.10), transparent 70%),
    radial-gradient(520px 380px at 4% 34%, rgba(242,154,92,.08), transparent 70%);
}