@charset "UTF-8";
/* ============================================================
   优港升学通 · 全站设计令牌基座 (VP0)
   ------------------------------------------------------------
   引入方式（单点传播，不需逐页改动）：
     · site.css 顶部 @import "css/tokens.css";  → 覆盖所有 link site.css 的页面
     · index.html 单独 <link>（它不引 site.css，用内联 <style>）
   加载顺序：tokens.css 先加载，site.css / 内联 <style> 后加载。
   因此同名旧规则会“后来居上”覆盖本文件 → 现有页面视觉零变化（VP0 验收要求）。
   新设计系统的类（.sec-title/.lead/.hairline/.card-navy/.img-duotone）命名不冲突，
   可直接生效；冲突类（.eyebrow/.btn-gold/.btn-ghost）在新页面/styleguide 生效，
   在已有 site.css 页面仍走旧样式，待后续 VP 重建对应板块时切换。
   ============================================================ */

/* --- 新增字体权重（单点传播给全站；与各页旧 <link> 叠加，纯增量不破坏） --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500;600;700&family=Noto+Sans+SC:wght@300;400;500&display=swap');

:root {
  /* ---------- 海军蓝三档 ---------- */
  --navy-900: #081427;
  --navy-800: #0B1E3D;
  --navy-700: #122A52;

  /* ---------- 金三档 ---------- */
  --gold:      #C9A24B;
  --gold-soft: #D9BC77;
  --gold-line: rgba(201, 162, 75, .26);

  /* ---------- 纸白 / 文字 ---------- */
  --paper:     #F4F0E6;
  --paper-dim: #C9D2E2;
  --muted:     #8294B3;

  /* ---------- 字体 ----------
     说明：提示词要求的“@font-face 指向 system-ui”在技术上不成立
     （system-ui 非字体文件）。正确做法 = 字体栈以中文系统字体兜底
     + font-display:swap（已在上方 Google Fonts URL 内）。
     兜底栈含 PingFang SC / Microsoft YaHei，覆盖 iOS / macOS / Windows / Android。 */
  --serif: "Noto Serif SC", Georgia, "Songti SC", "SimSun", serif;
  --sans:  "Noto Sans SC", system-ui, -apple-system, "PingFang SC",
           "Microsoft YaHei", "Segoe UI", sans-serif;

  /* ---------- 圆角（仅新增 --r-xs，其余档位由各页旧 token 维持，不在此覆盖） ---------- */
  --r-xs: 2px;

  /* ============================================================
     别名兼容层：旧 token 名 → 新值。
     仅在“未被页面自身 :root 覆盖”的环境生效（如 styleguide / 新页面）。
     现有 index.html / site.css 各自定义了同名旧 token，会覆盖以下别名，
     因此现有页面保持原色，新页面自动吃到新系统。
     ============================================================ */
  --navy:       var(--navy-800);
  --navy-2:     var(--navy-700);
  --gold-light: var(--gold-soft);
  --bg:         var(--paper);
  --white:      #FFFFFF;
}

/* ============================================================
   可复用工具类
   ============================================================ */

/* 英文斜体眉标 + 前置金色短横线。⚠️ 每页最多用 2 次（impeccable 反模板规则）。 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  flex: none;
}

/* 章节衬线标题（区别于 site.css 已有的 .section-title） */
.sec-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.2;
  color: var(--navy-800);
  text-wrap: balance;
}

/* 引导文 / 长说明 */
.lead {
  font-family: var(--sans);
  font-weight: 300;
  color: var(--muted);
  line-height: 1.8;
  text-wrap: pretty;
}

/* 金色实心按钮 / 描边幽灵按钮（带 hover 微上移） */
.btn-gold,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 27px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .22s ease,
              background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-gold {
  background: var(--gold);
  color: var(--navy-900);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(201, 162, 75, .32);
}
.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--gold-line);
}
.btn-ghost:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold-soft);
}

/* 金色细分隔线（横向用 .hairline，竖向加 .hairline--v） */
.hairline {
  border: none;
  height: 1px;
  width: 100%;
  background: var(--gold-line);
  margin: 0;
}
.hairline--v {
  height: auto;
  width: 1px;
  align-self: stretch;
}

/* 深蓝卡片：navy-800 底 + 金线描边 + 圆角 */
.card-navy {
  background: var(--navy-800);
  border: 1px solid var(--gold-line);
  border-radius: var(--r-lg, 6px);
  padding: 28px;
  color: var(--paper);
}

/* ============================================================
   照片 duotone 统一处理
   用法：
     <figure class="img-duotone">
       <img src="assets/img/hero-skyline.jpg" alt="夜色中的香港岛天际线">
     </figure>
   说明：::after 叠 navy 渐变 (multiply) 统一冷调，右上角再叠金色微光氛围。
   ============================================================ */
.img-duotone {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg, 6px);
  isolation: isolate;            /* 隔离混合模式，避免影响外层 */
}
.img-duotone > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.img-duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% 16%, rgba(201, 162, 75, .15), transparent 60%),
    linear-gradient(180deg, rgba(8, 20, 39, .45), rgba(8, 20, 39, .78));
  mix-blend-mode: multiply;
}
/* 轻处理变体（顾问头像等需保留面部清晰度时用） */
.img-duotone--soft::after {
  background:
    radial-gradient(120% 80% at 78% 16%, rgba(201, 162, 75, .1), transparent 60%),
    linear-gradient(180deg, rgba(8, 20, 39, .2), rgba(8, 20, 39, .32));
}

@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-ghost { transition: none; }
}