/* ==========================================================================
   QingEuroConnect — Design Tokens
   方向：宋式美学（Song aesthetic）· 纸白底 × 墨黑字 × 天青强调
   「雨过天青云破处」——汝窑天青为唯一强调色，墨分五阶，大面留白。
   所有颜色 / 尺度 / 动效都只在此处定义，组件内禁止硬编码色值。
   ========================================================================== */

:root {
  /* ---- 墨阶（浅色主题：墨用于前景与深色收边） ---- */
  --ink-900: #13181c;   /* 焦墨：页脚、跑马灯深收边、图上遮罩 */
  --ink-800: #f4f6f7;   /* 页面基底：宣纸白，微微偏青 */
  --ink-700: #ffffff;   /* 卡片 / 面板 / 灯箱底：素白 */
  --ink-600: #eaf0f3;   /* 次级面板：淡青灰 */
  --ink-500: #dbe4ea;   /* 分隔、内嵌块、进度轨：淡墨 */

  /* ---- 前景色（浅底之上用墨） ---- */
  --paper:     #1b2126;  /* 正文：浓墨 */
  --paper-dim: #47555f;  /* 次级正文：淡墨 */
  --muted:     #66747f;  /* 说明文字，对 --ink-800 对比度 ≈ 4.9:1 */
  --line:      rgba(27, 33, 38, 0.14);
  --line-strong: rgba(27, 33, 38, 0.32);

  /* ---- 墨上前景（深色面 / 照片遮罩上专用） ---- */
  --mist:     #e8eef2;   /* 墨底上的亮字 */
  --mist-dim: #a9bac5;   /* 墨底上的次级亮字 */

  /* ---- 强调色：天青（汝窑青，单页唯一强调色） ---- */
  --accent:      #3e6e93;
  --accent-deep: #2c5273;
  --accent-wash: rgba(62, 110, 147, 0.10);
  --accent-line: rgba(62, 110, 147, 0.40);
  --on-accent:   #f7fafc;   /* 天青底上的文字 */

  /* ---- 语义别名 ---- */
  --color-bg:      var(--ink-800);
  --color-surface: var(--ink-700);
  --color-text:    var(--paper);
  --color-muted:   var(--muted);
  --color-border:  var(--line);

  /* ---- 字体：宋式衬线（西文 Fraunces / Karla，中文落宋体） ---- */
  --font-display: "Fraunces", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", Georgia, serif;
  --font-body:    "Karla", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "SimSun", serif;
  --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* ---- 字阶（1.25 模块化比例） ---- */
  --fs-300: 0.8rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5625rem;
  --fs-700: 1.953rem;
  --fs-800: 2.441rem;
  --fs-900: 3.052rem;
  --fs-1000: 3.815rem;
  --fs-1100: 4.768rem;
  --fs-1200: 5.96rem;

  /* 展示字号（流体，带负字距，见 base.css） */
  --fs-display: clamp(2.9rem, 8.4vw, 7.4rem);
  --fs-title:   clamp(2.1rem, 4.6vw, 3.6rem);

  /* ---- 间距梯度（4 / 8 / 16 / 24 / 40 / 64 / 96） ---- */
  --space-1: 4px;
  --space-2: 8px;
  /* 间距尺度：固定 px → 流式 clamp，内容内边距随屏宽缩放（移动端更紧凑、桌面端更舒展） */
  --space-3: clamp(12px, 1.6vw, 16px);
  --space-4: clamp(16px, 2.2vw, 24px);
  --space-5: clamp(24px, 3.4vw, 40px);
  --space-6: clamp(40px, 5vw, 64px);
  --space-7: clamp(56px, 8vw, 96px);
  --space-8: clamp(80px, 11vw, 140px);

  /* ---- 圆角：宋式克制，直肩微圆 ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- 阴影：淡青灰环境影，远比暗色主题轻 ---- */
  --shadow-1: 0 2px 10px rgba(19, 30, 40, 0.08);
  --shadow-2: 0 10px 30px rgba(19, 30, 40, 0.12);
  --shadow-3: 0 28px 70px rgba(19, 30, 40, 0.18);

  /* ---- 动效 ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* ---- 布局 ---- */
  --page-max: 1280px;
  --page-pad: clamp(20px, 5vw, 72px);
  --masthead-h: 68px;
}