/* ==========================================================================
   tokens.css — 设计令牌（唯一真源）
   云阶月地 · Lunastep Global Education
   主色取自品牌 PDF：深海军蓝 #011e4a / 香槟金 #c4a15d
   ========================================================================== */

:root {
  /* ---------- 品牌色阶：深海军蓝 ---------- */
  --navy-950: #010b1e;
  --navy-900: #01142e;
  --navy-800: #011e4a;   /* 品牌主色（PDF 拾取） */
  --navy-700: #05295b;   /* 标志底色（PDF 拾取） */
  --navy-600: #0a3d7d;
  --navy-500: #14549a;
  --navy-400: #4b7cb8;
  --navy-300: #8fb2d4;
  --navy-200: #c6d8ea;
  --navy-100: #e6eef8;

  /* ---------- 点缀色阶：香槟金（拾取自标志细线） ---------- */
  --gold-700: #8a6c33;
  --gold-600: #a8874a;
  --gold-500: #c4a15d;   /* 强调色 */
  --gold-400: #d2b479;
  --gold-300: #e0cb9e;
  --gold-200: #efe3c6;

  /* ---------- 中性面：暖纸白（避免纯白硬碰） ---------- */
  --paper-0: #ffffff;
  --paper-1: #fbfaf7;    /* 页面底色 */
  --paper-2: #f4f1ea;    /* 次级面 */
  --paper-3: #ebe6db;    /* 分割/内嵌面 */

  /* ---------- 文字 ---------- */
  --ink-1: #0c1626;      /* 近黑（带蓝调，非纯黑） */
  --ink-2: #35435c;      /* 次级正文 */
  --ink-3: #6c7a92;      /* 弱化信息 */
  --ink-onDark-1: #f7f5f0;
  --ink-onDark-2: rgba(247, 245, 240, .68);
  --ink-onDark-3: rgba(247, 245, 240, .42);

  /* ---------- 描边 ---------- */
  --line-1: rgba(1, 30, 74, .09);
  --line-2: rgba(1, 30, 74, .16);
  --line-3: rgba(1, 30, 74, .28);
  --line-onDark-1: rgba(247, 245, 240, .12);
  --line-onDark-2: rgba(247, 245, 240, .22);
  --line-gold: rgba(196, 161, 93, .45);

  /* ---------- 语义别名 ---------- */
  --color-bg: var(--paper-1);
  --color-surface: var(--paper-0);
  --color-surface-alt: var(--paper-2);
  --color-text: var(--ink-1);
  --color-muted: var(--ink-2);
  --color-faint: var(--ink-3);
  --color-accent: var(--gold-500);
  /* 强调"文字"色：浅底用深古金保证 4.7:1，深底换成亮金 */
  --color-accent-text: var(--gold-700);
  /* 大字号（≥24px）强调色：3:1 即可，允许更饱满的金 */
  --color-accent-display: var(--gold-600);
  --color-border: var(--line-1);
  --color-deep: var(--navy-800);
  --color-deepest: var(--navy-950);

  /* ---------- 字体 ---------- */
  /* 中文展示字：思源宋体（自托管子集，见 fonts.css） */
  --font-serif: "Lunastep Serif", "Noto Serif SC", "Source Han Serif SC",
                "Songti SC", "STSong", "SimSun", serif;
  /* 正文：思源黑体（自托管子集） */
  --font-sans: "Lunastep Sans", "Noto Sans SC", "Source Han Sans SC",
               "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  /* 拉丁展示字：Cormorant Garamond，仅用于英文引文/英文短语 */
  --font-latin: "Lunastep Latin", "Cormorant Garamond", "Times New Roman", Georgia, serif;
  /* 数字专用：Cormorant 的 1/0 与 I/O 几乎同形（"10+" 会被读成 "IO+"，
     "2019" 读成 "2OI9"）。凡是要让人读准的数字一律走这条，
     思源宋体的拉丁数字形清晰，且同为衬线，不破坏雅致调性。 */
  --font-num: "Lunastep Serif", "Noto Serif SC", "Source Han Serif SC",
              "Times New Roman", Georgia, serif;

  /* 字阶（1.25 模块化，展示字用 clamp 保持张力） */
  --fs-2xs: .6875rem;   /* 11 */
  --fs-xs: .75rem;      /* 12 */
  --fs-sm: .8125rem;    /* 13 */
  --fs-base: .9375rem;  /* 15 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;   /* 30 */
  --fs-3xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-4xl: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);
  --fs-5xl: clamp(2.25rem, 1rem + 5vw, 4.25rem);
  --fs-hero: clamp(2.5rem, 1rem + 7vw, 5.75rem);

  /* ---------- 语义字阶（全站字号的唯一真源）----------
     组件里一律引用下面这组语义名，不要再直接写 --fs-* 或临时 clamp，
     否则层级会在各处悄悄漂移（内页 h1 曾比区块 h2 还小，就是这么来的）。

       h1  首页首屏   --type-hero     92px @1440
       h1  内页横幅   --type-page     68px   ← 必须高于区块标题一档
       h2  区块标题   --type-section  56px
       h3  页内主角   --type-sub      40px   业务大卡标题、人物名
       h3  卡片标题   --type-card     20px
       h4  列表项     --type-item     17px
       引文           --type-quote    40px
       导语           --type-lead     17px
       正文           --type-body     15px
       辅助信息       --type-meta     13px
       英文小标签     --type-label    12px */
  --type-hero: var(--fs-hero);
  --type-page: var(--fs-5xl);
  --type-section: var(--fs-4xl);
  --type-sub: var(--fs-3xl);
  --type-card: var(--fs-lg);
  --type-item: var(--fs-md);
  --type-quote: var(--fs-3xl);
  --type-lead: var(--fs-md);
  --type-body: var(--fs-base);
  --type-meta: var(--fs-sm);
  --type-label: var(--fs-xs);

  --lh-tight: 1.06;
  --lh-snug: 1.24;
  --lh-body: 1.78;      /* 中文正文行高 ≥ 1.7 */
  --ls-display: -0.015em;
  --ls-label: .18em;    /* 英文小标签字距 */

  /* ---------- 间距梯度 ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* 区块纵向节奏 */
  --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---------- 圆角（统一） ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---------- 阴影（三级，带环境蓝而非纯黑） ---------- */
  --shadow-1: 0 1px 2px rgba(1, 30, 74, .05), 0 2px 8px rgba(1, 30, 74, .045);
  --shadow-2: 0 2px 6px rgba(1, 30, 74, .06), 0 12px 32px rgba(1, 30, 74, .075);
  --shadow-3: 0 4px 12px rgba(1, 30, 74, .08), 0 28px 68px rgba(1, 30, 74, .13);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 180ms;
  --dur-base: 340ms;
  --dur-slow: 680ms;

  /* ---------- 构成 ---------- */
  --container: 1220px;
  --container-narrow: 880px;
  --header-h: 76px;
}

/* 深底区块：切换语义令牌，组件代码不动 */
[data-surface="deep"] {
  --color-bg: var(--navy-800);
  --color-surface: var(--navy-700);
  --color-surface-alt: var(--navy-900);
  --color-text: var(--ink-onDark-1);
  --color-muted: var(--ink-onDark-2);
  --color-faint: var(--ink-onDark-3);
  --color-border: var(--line-onDark-1);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 10px rgba(0, 0, 0, .22);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .32), 0 16px 40px rgba(0, 0, 0, .3);
  --shadow-3: 0 6px 16px rgba(0, 0, 0, .34), 0 32px 80px rgba(0, 0, 0, .42);
  --line-1: var(--line-onDark-1);
  --line-2: var(--line-onDark-2);
}

[data-surface="deepest"] {
  --color-bg: var(--navy-950);
  --color-surface: var(--navy-900);
  --color-surface-alt: var(--navy-800);
  --color-text: var(--ink-onDark-1);
  --color-muted: var(--ink-onDark-2);
  --color-faint: var(--ink-onDark-3);
  --color-border: var(--line-onDark-1);
  --line-1: var(--line-onDark-1);
  --line-2: var(--line-onDark-2);
}