/* ===========================================================================
   BLUE OAK INTERNATIONAL / 宏泰國際 — 品牌视觉令牌 (Design Tokens)
   颜色：以宏泰國際官方标志的四级蓝为中心，界面色＝标志色。
   字号/间距：Figma 原型 BlueOak_SJP 在 1920px 画布上 1:1 渲染实测，±2px。
   画布基准：1920px 宽。换算到 1440 画布乘 0.75，1200 画布乘 0.625。
   =========================================================================== */

:root {
  /* ---------- 品牌色 Brand：全部取自宏泰國際官方标志的四级蓝 ---------- */
  --boi-navy:        #014099;  /* 主色。标志「宏泰」蓝。导航栏、页脚、深色区块、标题、主按钮 */
  --boi-mid:         #0051A4;  /* 中蓝。树冠中层。悬停态、次一级深色块 */
  --boi-blue:        #007BC7;  /* 亮蓝。树冠下层与主干。重点词、小节标题、整块蓝底区、行动按钮（白字 4.5:1） */
  --boi-sky:         #0B93D0;  /* 天蓝。标志「國際」蓝。只做色条/色块点睛，不做小字（白字仅 3.4:1） */
  --boi-sky-tint:    #A9DDF3;  /* 天蓝浅调。只用在深蓝底上的强调字与链接 */
  --boi-white:       #FFFFFF;  /* 主要背景 */

  /* ---------- 中性色 Neutrals（带标志蓝的冷调） ---------- */
  --boi-surface:     #EAF2FA;  /* 浅色区块底，唯一的浅底色 */
  --boi-grey-100:    #F2F5F9;
  --boi-grey-200:    #D6DEE8;  /* 边框 */
  --boi-grey-300:    #C3CEDB;  /* 分隔线 */
  --boi-grey-500:    #98A6B8;  /* 失效态 */
  --boi-grey-700:    #5A6B85;  /* 次要文字 */
  --boi-ink:         #1C2A44;  /* 正文 */
  --boi-ink-muted:   #5A6B85;

  /* ⚠ 标志以外的色相（薄荷绿、青绿、金、橙、红）一律不用。 */

  /* ---------- 深色区上的文字 ---------- */
  --boi-on-dark:           #FFFFFF;
  --boi-on-dark-muted:     rgba(255,255,255,.78);

  /* ---------- 字体 Typography ---------- */
  /* ⚠ 原型是位图渲染，无法读出 Figma 里登记的字体名。以下是「同族替代」，
     要拿到确切字体名请在 Figma 里开 Inspect 面板看。 */
  --boi-font-cjk: "Noto Sans TC", "Source Han Sans TC", "PingFang TC",
                  "Microsoft JhengHei", "Noto Sans SC", sans-serif;
  --boi-font-latin: "Montserrat", "Poppins", "Helvetica Neue", Arial, sans-serif;

  /* 字号（1920 画布实测值） */
  --boi-fs-h1:       48px;   /* 首屏大标题 */
  --boi-fs-h2:       40px;   /* 区块标题 */
  --boi-fs-h3:       32px;   /* 卡片/小节标题 */
  --boi-fs-lead:     28px;   /* 首屏导语 */
  --boi-fs-body:     24px;   /* 正文 */
  --boi-fs-nav:      22px;   /* 导航项 */
  --boi-fs-caption:  18px;   /* 页脚、注释 */

  /* 行高：CJK 用紧行距，实测 lead 为 28/34 ≈ 1.21 */
  --boi-lh-tight:    1.2;    /* 标题与导语 */
  --boi-lh-body:     1.45;   /* 段落 */

  /* ---------- 标志色 Logo colours（与上面的品牌色同值，标志按原文件照贴） ---------- */
  --boi-logo-navy:   #014099;  /* 「宏泰」二字、拉丁字标、树冠上层、底部横杠（48%） */
  --boi-logo-blue:   #0B93D0;  /* 「國際」二字、树冠最外层浅叶（22%） */
  --boi-logo-mid:    #0051A4;  /* 树冠中层叶片（14%） */
  --boi-logo-light:  #007BC7;  /* 树冠下层叶片与主干（13%） */

  --boi-tracking-logo:  .08em;  /* BLUE OAK INTERNATIONAL 字标 */
  --boi-tracking-latin: .05em;  /* 页脚等拉丁小字 */

  /* ---------- 版式 Layout ---------- */
  --boi-canvas:        1920px;
  --boi-margin-edge:    130px;  /* 通栏区块的左右边距（导航、首屏） */
  --boi-margin-narrow:  310px;  /* 居中窄栏区块的左右边距 */
  --boi-container:     1300px;  /* 窄栏内容宽度 */
  --boi-col-pitch:      457px;  /* 三栏网格的列间距（列心到列心） */
  --boi-gutter:          64px;  /* 栏间距 */
  --boi-navbar-h:       132px;

  /* ---------- 元件 Components ---------- */
  --boi-btn-h:          58px;
  --boi-btn-radius:    999px;   /* 全圆角胶囊，无例外 */
  --boi-btn-min-w:     300px;
  --boi-card-radius:    12px;
  --boi-glass-bg:      rgba(1,32,77,.62);   /* 图片上的深蓝玻璃卡片 */

  /* ---------- 标志性斜切 Signature angle ---------- */
  --boi-wedge-angle:   9.7deg;  /* 实测左右两侧同为 ~9.7°，可按 10° 用 */
  --boi-wedge-apex:    35.4%;   /* 尖点距左边缘的比例 */
}

/* 斜切分隔：白色楔形压在图片底部（首屏用）。
   clip-path 的三个点 = 左边缘、尖点、右边缘。 */
.boi-wedge {
  clip-path: polygon(0 12%, 35.4% 0, 100% 22%, 100% 100%, 0 100%);
  background: var(--boi-white);
}

/* 胶囊按钮三种变体 */
.boi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--boi-btn-min-w); height: var(--boi-btn-h);
  padding: 0 40px; border: 0; border-radius: var(--boi-btn-radius);
  font-family: var(--boi-font-cjk); font-size: var(--boi-fs-body); font-weight: 700;
  cursor: pointer; text-decoration: none;
}
.boi-btn--navy  { background: var(--boi-navy);  color: #fff; }              /* 图片/浅底上 */
.boi-btn--white { background: #fff;             color: var(--boi-navy); }   /* 蓝底区块上 */
.boi-btn--cta   { background: var(--boi-blue);  color: #fff; }              /* 仅最终 CTA */

/* ===========================================================================
   盈信家辦 EVERGREEN FAMILY OFFICE — 旗下公司的品牌色
   来源：客户提供的官方 Adobe Illustrator 标志文件，逐像素取值。
   用法：做盈信物料时，把 .eg-brand 挂在根元素上覆盖三个品牌色即可，
        版式/字阶/胶囊按钮/9.7° 斜切等结构令牌两个品牌完全共用，不用改。
   官方标志文件里只有蓝、没有金，强调色同样只从这几个蓝里取。
   =========================================================================== */
:root {
  --eg-navy:        #004098;  /* 品牌深蓝：「盈信」二字、花押深笔画 */
  --eg-blue:        #0093D0;  /* 品牌亮蓝：「家辦／家族辦公室」、花押浅笔画 */
  --eg-latin:       #1D4592;  /* 拉丁字 EVERGREEN（比中文深蓝略偏灰，是第三个色） */
  --eg-reverse-bg:  #004592;  /* 反白版专用底板色，只做底不上字 */
  --eg-mark-grad:   linear-gradient(180deg, #004099 0%, #0091CF 100%); /* 花押渐变，仅全称版与单独花押 */
  --eg-mark-ratio:  0.850;    /* 花押 宽/高。⚠ 竖长，与宏泰橡树的 1.2526 相反 */
}

/* 挂在 <html> 或某个容器上，把界面主色整体切到盈信。
   盈信同样只用自己标志里的蓝，不用金色或其他色相。 */
.eg-brand {
  --boi-navy:  var(--eg-navy);
  --boi-blue:  var(--eg-blue);
  --boi-sky:   var(--eg-blue);
}