/* =============================================================================
   深河出版 — Design Tokens（權威單一事實來源）
   Version 1.0 | 2026-07-01
   整合自：10-visual-system.md（視覺）、20-motion-tech-spec.md（動效）
           review-codex-on-visual.md、review-designer-on-motion.md（交互審查）

   架構：三層 token
     primitive（原色，不直接被元件使用）
       → semantic（語意，全站與 shader 共用的唯一真值）
         → component（元件別名，含技術稿相容 alias）

   ⚠ 單一官方色板（2026-07 定案）：
     依客戶《品牌手冊》b.06，官方標準色只有 藍 #0b3d92 / 黑 / 白，並提供藍色階。
     客戶已決定不做第二套色 → 全站鎖定官方藍色板，semantic 主色＝#0b3d92、底色＝純白。
     原「鈷藍／青花」雙色板 primitive 保留於第 1 層僅供設計參考，semantic 已不再引用；
     data-river-palette 屬性已從各頁 HTML 移除，切換 UI 亦已下架。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PRIMITIVE — 原色（設計端參考，元件勿直接引用）
   ----------------------------------------------------------------------------- */
:root {
  /* 官方標準色（品牌手冊：主色藍 #0b3d92 / 黑 / 白）＋依主色推導之藍色階（水波/層次用） */
  --primitive-brand-blue:   #0b3d92;   /* 官方主色（RGB 11,61,146） */
  --primitive-brand-top:    #061a44;   /* 最深，沉入水中 */
  --primitive-brand-deep:   #082a66;
  --primitive-brand-bottom: #1a56b0;   /* 底部略亮，靜水透光 */
  --primitive-brand-bright: #2f5fc0;
  --primitive-brand-soft:   #6f8fce;
  --primitive-brand-glow:   #a9c6f5;

  /* 鈷藍版原色（保留供設計參考，已不作為預設色板） */
  --primitive-cobalt-top:    #16275f;
  --primitive-cobalt-base:   #1e3a8c;
  --primitive-cobalt-deep:   #101d4d;
  --primitive-cobalt-bright: #3b5bc0;
  --primitive-cobalt-soft:   #6f86c8;
  --primitive-cobalt-mist:   #b8c4e0;
  --primitive-cobalt-glow:   #b0c8f8;

  /* 青花瓷釉版原色（深靛水，礦物鈷料；Hue 210–220，非藍綠） */
  --primitive-qh-top:    #0a2240;
  --primitive-qh-deep:   #0f2e50;
  --primitive-qh-bottom: #1a3f6e;
  --primitive-qh-base:   #2158a0;
  --primitive-qh-bright: #3a72b4;
  --primitive-qh-soft:   #6a9ec7;
  --primitive-qh-mist:   #b8d0e4;
  --primitive-qh-glow:   #b4d2f0;

  /* 中性 / 紙瓷 / 墨（鈷藍版） */
  --primitive-paper:        #faf8f2;
  --primitive-on-river:     #eef1f8;
  --primitive-ink:          #0c0c10;
  --primitive-ink-warm:     #2a2c34;
  --primitive-ink-body:     #34363f;
  --primitive-grey:         #5a5e6b;
  --primitive-caption:      #8a8e9a;
  --primitive-warm-border:  #e3e3dc;
  --primitive-warm-divider: #ddddd4;
  --primitive-imgph:        #dde3f3;
  --primitive-form-bd:      #ccccc2;
  --primitive-surface-card: #ffffff;

  /* 中性 / 紙瓷 / 墨（青花瓷釉版，偏暖瓷白） */
  --primitive-qh-paper:        #faf7f2;
  --primitive-qh-on-river:     #f0ece3;
  --primitive-qh-glaze:        #e5edf5;
  --primitive-qh-ink:          #1a1c22;
  --primitive-qh-ink-warm:     #2c2e38;
  --primitive-qh-ink-body:     #36383f;
  --primitive-qh-grey:         #5e5c66;
  --primitive-qh-grey-warm:    #8a7f74;
  --primitive-qh-border:       #dcd6cc;
  --primitive-qh-divider:      #d4cfc8;
  --primitive-qh-imgph:        #d5dded;
  --primitive-qh-form-bd:      #c8c3ba;
  --primitive-qh-surface-card: #f8f5ef;

  /* 語意狀態色（兩版共用） */
  --primitive-success:         #166534;
  --primitive-success-on-dark: #86efac;
  --primitive-error:           #b91c1c;
  --primitive-error-on-dark:   #fca5a5;
  --primitive-warning:         #b45309;
  --primitive-warning-on-dark: #fcd34d;
}

/* -----------------------------------------------------------------------------
   2. SEMANTIC — 語意（全站與 three.js shader 共用的唯一真值）
      shader uniforms 一律讀 --color-river-* ；--motion-* 為相容 alias（見第 3 層）
   ----------------------------------------------------------------------------- */

/* 2-A. 鈷藍版 ------------------------------------------------------------------ */
:root,
[data-river-palette="cobalt"],
[data-river-palette="qinghua-glaze"] {
  /* 水波背景漸層（three.js／canvas 讀取）— 官方主色藍色階 */
  --color-river-gradient-top:    var(--primitive-brand-top);    /* #061a44 */
  --color-river-gradient-mid:    var(--primitive-brand-blue);   /* #0b3d92 官方主色 */
  --color-river-gradient-bottom: var(--primitive-brand-bottom); /* #1a56b0 */
  --color-river-glow:            var(--primitive-brand-glow);   /* #a9c6f5 */
  --color-river-accent:          var(--primitive-brand-soft);   /* #6f8fce */

  /* 表面 / 內容浮層（純白底，對齊官方色票 白；高不透明度讓內容區讀為純白，僅留一絲水感流動） */
  --surface-paper-translucent: rgba(255, 255, 255, 0.95);
  --surface-card:              var(--primitive-surface-card);    /* #ffffff */
  --surface-glaze:             #eef2fb;

  /* 強調色 — 官方主色 */
  --color-accent-primary: var(--primitive-brand-blue);   /* #0b3d92 */
  --color-accent-deep:    var(--primitive-brand-deep);   /* #082a66 */
  --color-accent-bright:  var(--primitive-brand-bright); /* #2f5fc0 */
  --color-accent-soft:    var(--primitive-brand-soft);   /* #6f8fce */

  /* 文字 */
  --color-text-primary:   var(--primitive-ink);       /* #0c0c10 */
  --color-text-secondary: var(--primitive-grey);      /* #5a5e6b */
  --color-text-caption:   var(--primitive-caption);   /* #8a8e9a */
  --color-text-body:      var(--primitive-ink-body);  /* #34363f */
  --color-text-emphasis:  var(--primitive-ink-warm);  /* #2a2c34 */
  --color-on-river:       var(--primitive-on-river);  /* #eef1f8 */

  /* 邊框 / 分隔 / 表單 / 佔位 */
  --color-border-card:    var(--primitive-warm-border);   /* #e3e3dc */
  --color-border-divider: var(--primitive-warm-divider);  /* #ddddd4 */
  --color-form-border:    var(--primitive-form-bd);       /* #ccccc2 */
  --color-imgph-bg:       #dbe4f6;

  /* nav 深色玻璃（官方主色最深階 #061a44） */
  --color-nav-scrolled-bg: rgba(6, 26, 68, 0.9);
  --color-nav-panel-bg:    rgba(6, 26, 68, 0.97);

  /* RGB 配對（供 rgba(var(--x-rgb), a) 使用） */
  --color-accent-primary-rgb: 11, 61, 146;
  --color-on-river-rgb:       238, 241, 248;
  --color-paper-rgb:          255, 255, 255;
  --color-error-rgb:          185, 28, 28;
  --color-success-rgb:        22, 101, 52;
  --color-warning-rgb:        180, 83, 9;
  /* 漣漪注入色（screen/additive 疊加用） */
  --color-river-ripple-rgb:   169, 198, 245;   /* 對應 #a9c6f5 */
}

/* 2-B. 青花瓷釉版 — 已停用 ------------------------------------------------------
   客戶決定不做第二套色（維持單一官方色）；青花版併入上方官方色板。
   若日後需重啟雙色板，恢復本區塊選擇器並自 git 歷史取回原 qh-* 對應即可。
   （原 qh-* primitive 仍保留於第 1 層供設計參考。）
   ----------------------------------------------------------------------------- */

/* 共用語意狀態色（兩版相同，獨立於色板） */
:root {
  --color-state-success:         var(--primitive-success);
  --color-state-success-on-dark: var(--primitive-success-on-dark);
  --color-state-error:           var(--primitive-error);
  --color-state-error-on-dark:   var(--primitive-error-on-dark);
  --color-state-warning:         var(--primitive-warning);
  --color-state-warning-on-dark: var(--primitive-warning-on-dark);
}

/* -----------------------------------------------------------------------------
   3. COMPONENT — 元件別名（含技術稿相容 alias；元件 / shader JS 由此消費）
   ----------------------------------------------------------------------------- */
:root {
  /* 視覺稿沿用名稱 */
  --bg-surface:    var(--surface-paper-translucent);
  --accent:        var(--color-accent-primary);
  --accent-deep:   var(--color-accent-deep);
  --accent-bright: var(--color-accent-bright);
  --accent-soft:   var(--color-accent-soft);
  --on-dark:       var(--color-on-river);   /* 後續可改名 --on-river */
  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --surface-card-solid: var(--surface-card);

  /* 全頁靜態 fallback 背景（reduce-motion / WebGL 失效時，body 不可為黑） */
  --bg-canvas-fallback: linear-gradient(
    180deg,
    var(--color-river-gradient-top) 0%,
    var(--color-river-gradient-mid) 52%,
    var(--color-river-gradient-bottom) 100%
  );

  /* 技術稿（three.js）相容 alias — 不作為真值，一律指向 semantic */
  --motion-gradient-top:    var(--color-river-gradient-top);
  --motion-gradient-mid:    var(--color-river-gradient-mid);
  --motion-gradient-bottom: var(--color-river-gradient-bottom);
  --motion-glow:            var(--color-river-glow);
  --motion-accent:          var(--color-river-accent);
  --motion-surface-paper:   var(--surface-paper-translucent);
  --motion-nav-bg:          var(--color-nav-scrolled-bg);
}

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHY — 字體系統
   ----------------------------------------------------------------------------- */
:root {
  --font-serif: 'Noto Serif TC', serif;     /* 標題、品牌字、書名 */
  --font-sans:  'Noto Sans TC', sans-serif; /* 內文、UI、按鈕 */

  /* type scale（size 用 clamp，行高/字距為慢讀調性） */
  --fs-hero:    clamp(48px, 9vw, 120px);   /* Hero h1，serif 300，ls 18px */
  --fs-h1:      clamp(26px, 3.6vw, 40px);  /* 內頁主標，serif 500，lh 1.5 */
  --fs-h2:      clamp(28px, 4vw, 44px);    /* sec-title，serif 500，ls 3px */
  --fs-h3:      19px;                       /* article 標題，serif 500 */
  --fs-h4:      17px;                       /* 卡片標題，serif 500 */
  --fs-spirit:  clamp(16px, 1.7vw, 19px);  /* 品牌精神大段，lh 2.4 */
  --fs-body:    15px;                       /* 內文，sans 300，lh 2.1–2.2 */
  --fs-small:   13px;                       /* 次要 / meta */
  --fs-caption: 12px;                       /* 輔助小字 */
  --fs-label:   13px;                       /* sec-label / 按鈕 */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight:   1.1;   /* Hero */
  --lh-title:   1.4;   /* sec-title */
  --lh-heading: 1.5;   /* 內頁 h1 */
  --lh-body:    2.1;   /* 內文 */
  --lh-spirit:  2.4;   /* 品牌精神慢讀段 */

  --ls-hero:    18px;
  --ls-title:   3px;
  --ls-label:   5px;
  --ls-btn:     2px;
  --ls-body:    0.5px;
  --ls-wordmark: 4px;
}

/* -----------------------------------------------------------------------------
   5. SPACING & LAYOUT — 間距、節奏、版面
   ----------------------------------------------------------------------------- */
:root {
  /* 8pt 基準間距 scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  16px;
  --space-4:  24px;
  --space-5:  32px;
  --space-6:  48px;
  --space-7:  60px;
  --space-8:  80px;
  --space-9:  110px;
  --space-10: 150px;

  /* section 垂直留白（呼吸感） */
  --section-pad-y-desktop: 110px;
  --section-pad-y-mobile:  74px;
  --page-pad-top-desktop:  150px;
  --page-pad-top-mobile:   104px;
  --gutter-desktop: 8vw;
  --gutter-mobile:  24px;

  /* 內容寬度 / 閱讀行寬 */
  --content-max:   1200px;
  --reading-max:   760px;   /* 文章內文最佳行寬 */
  --intro-max:     620px;   /* sec-intro */

  --grid-gap:      60px;

  /* breakpoints（供文件參照；CSS 內以 media query 寫死） */
  --bp-tablet: 820px;
  --bp-mobile: 560px;
  --bp-wide:   1200px;

  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 14px;

  /* 書封陰影 token 化（避免 hover 動畫 shadow） */
  --shadow-book-rest:  0 18px 40px rgba(16, 29, 77, 0.35), inset 6px 0 14px rgba(0, 0, 0, 0.25);
  --shadow-book-hover: 0 26px 54px rgba(16, 29, 77, 0.42), inset 6px 0 14px rgba(0, 0, 0, 0.25);
}

/* -----------------------------------------------------------------------------
   6. MOTION — 動效 token（GSAP / three.js 共用，數值以慢讀品牌原則定稿）
   ----------------------------------------------------------------------------- */
:root {
  --motion-ease-river: cubic-bezier(0.37, 0, 0.63, 1);

  --motion-duration-reveal: 2s;      /* 一般 scroll reveal（慢讀沉澱，勿縮短） */
  --motion-duration-hero:   1.6s;    /* Hero 首屏進場 */
  --motion-stagger-reveal:  0.065s;  /* 一般 stagger（60–70ms） */
  --motion-stagger-card:    0.12s;   /* 卡片列表例外，可至 0.16s */

  --motion-reveal-offset:   58px;    /* reveal translateY 起始位移 */
  --motion-reveal-start:    top 85%; /* GSAP ScrollTrigger：元素進入視窗 ~15% 觸發 */

  /* three.js 水波參數（恆定，流速不隨捲動加速 → 流而不湍） */
  --river-flow-speed:          0.22;   /* 全站恆定基準流速 */
  --river-flow-speed-longread: 0.13;   /* 文章/長閱讀頁固定降速（約 60%） */
  --river-scroll-uv-offset:    0.08;   /* uScrollProgress 的 UV 微位移上限 */
  --river-ripple-throttle:     240ms;  /* 游標漣漪節流（克制） */
  --river-ripple-life:         1.55s;  /* 單一漣漪生命週期 */
  --river-ripple-max-desktop:  8;
  --river-ripple-max-mobile:   4;
}

/* -----------------------------------------------------------------------------
   7. 無障礙 / 降階
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-reveal: 0.25s;
    --motion-duration-hero:   0.25s;
    --motion-reveal-offset:   0px;
  }
  /* three.js 不初始化；body 套用靜態漸層 fallback，禁止黑底 */
  body {
    background: var(--bg-canvas-fallback);
  }
}