/* ============================================================================
   tokens.css — 设计令牌 (Design Tokens)
   所有颜色 / 排版 / 间距 / 动效曲线的唯一来源。改这里 = 改全局。
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- 色彩 */
  /* 基础：深空底色。首页视觉由素材本身提供亮度，界面层保持克制。 */
  --c-void: #02060d;
  --c-deep: #040a14;
  --c-night: #07111d;
  --c-slate: #0d1a29;

  /* 品牌：取自 LOGO（青蓝 + 橙），橙色仅作极少量点缀 */
  --c-brand: #00a8d8;
  --c-brand-lift: #39c6f0;
  --c-ice: #8fe6ff;
  --c-glow: #d8f7ff;
  --c-amber: #f07800;

  /* 文本（深色底） */
  --t-1: rgba(236, 246, 255, 0.96);
  --t-2: rgba(206, 224, 242, 0.62);
  --t-3: rgba(178, 202, 226, 0.40);
  --t-4: rgba(160, 190, 220, 0.22);

  /* 文本（浅色底 / 亮部素材上） */
  --t-ink-1: #061019;
  --t-ink-2: rgba(8, 24, 38, 0.66);

  /* 分隔线 / 描边 —— 只用发丝线，不用粗边框 */
  --line-1: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.06);
  --line-brand: rgba(0, 168, 216, 0.34);

  /* 遮罩 / 玻璃 */
  --veil-strong: rgba(2, 6, 13, 0.86);
  --veil: rgba(2, 6, 13, 0.55);
  --veil-soft: rgba(2, 6, 13, 0.28);

  /* ---------------------------------------------------------------- 排版 */
  /* 中文一律走阿里巴巴普惠体（拉丁字体排前面，只让中文字形落到普惠体） */
  --f-display: "Space Grotesk Variable", "Inter Variable",
    "Alibaba PuHuiTi 3", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-body: "Inter Variable", "Alibaba PuHuiTi 3", "PingFang SC",
    "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Mono",
    Consolas, "Alibaba PuHuiTi 3", monospace;

  /* 流体字号 */
  --fs-display: clamp(2.6rem, 7.4vw, 8.4rem);
  --fs-h1: clamp(2rem, 4.6vw, 4.2rem);
  --fs-h2: clamp(1.5rem, 2.6vw, 2.4rem);
  --fs-h3: clamp(1.05rem, 1.5vw, 1.35rem);
  --fs-lead: clamp(0.95rem, 1.15vw, 1.15rem);
  --fs-body: clamp(0.86rem, 0.95vw, 0.98rem);
  --fs-meta: 0.7rem;
  --fs-micro: 0.62rem;

  --lh-tight: 0.98;
  --lh-snug: 1.22;
  --lh-body: 1.78;

  --ls-display: -0.035em;
  --ls-h: -0.02em;
  --ls-body: 0.006em;
  --ls-label: 0.34em;
  --ls-tag: 0.16em;

  /* ---------------------------------------------------------------- 间距 */
  --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;
  --sp-11: 176px;

  --gutter: clamp(20px, 4.2vw, 72px);
  /* 导航玻璃条的内边距：标题等元素与品牌区左缘对齐时要一起算 */
  --nav-pad-x: clamp(12px, 1.5vw, 22px);
  --shell-max: 1680px;
  --measure: 46ch;

  /* ---------------------------------------------------------------- 结构 */
  --nav-h: 76px;
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 6px;

  /* ---------------------------------------------------------------- 玻璃
     V2.0 Glass Design System —— 所有玻璃 UI 的数值来源。
     全站光效统一使用同一套冰蓝能量色，保证 UI 与「蓝色能量世界」同源。 */
  --glass-blue: 158 226 255; /* 冰蓝（主光源） */
  --glass-blue-deep: 62 172 240; /* 电蓝（折射/边缘） */
  --glass-blue-violet: 152 174 255; /* 少量蓝紫（最深的折射） */

  --glass-radius: 16px;
  --glass-radius-sm: 10px;
  --glass-radius-lg: 22px;
  --glass-radius-pill: 999px;

  /* Level 01 —— 主导航 / 主按钮 / 核心信息 */
  --glass1-bg: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.032) 44%,
    rgba(190, 232, 255, 0.052) 100%
  );
  --glass1-border: rgba(226, 244, 255, 0.2);
  --glass1-blur: 26px;
  --glass1-shadow: 0 20px 54px -20px rgba(0, 10, 25, 0.78),
    0 3px 12px -6px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --glass1-highlight: rgba(206, 242, 255, 0.9);

  /* Level 02 —— 作品卡片 / 信息面板 */
  --glass2-bg: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.066) 0%,
    rgba(255, 255, 255, 0.018) 48%,
    rgba(180, 226, 255, 0.038) 100%
  );
  --glass2-border: rgba(220, 240, 255, 0.135);
  --glass2-blur: 18px;
  --glass2-shadow: 0 16px 44px -22px rgba(0, 10, 25, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass2-highlight: rgba(190, 236, 255, 0.74);

  /* Level 03 —— 标签 / 辅助信息 / 提示 */
  --glass3-bg: linear-gradient(
    148deg,
    rgba(255, 255, 255, 0.046) 0%,
    rgba(255, 255, 255, 0.012) 100%
  );
  --glass3-border: rgba(216, 238, 255, 0.09);
  --glass3-blur: 12px;
  --glass3-shadow: 0 10px 30px -20px rgba(0, 10, 25, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --glass3-highlight: rgba(180, 230, 255, 0.58);

  /* 交互强度（统一在这里调，避免到处写死） */
  --glass-lit: 1; /* 局部光照总开关 0~1 */
  --glass-tilt: 4deg; /* 默认最大倾斜 */
  --glass-lift: -6px; /* hover 浮起 */
  --glass-scale: 1.014; /* hover 放大 */
  --glass-press: 0.978; /* 按压压缩 */

  /* ---------------------------------------------------------------- 动效 */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.62, 0.05, 0.3, 1);
  --e-swift: cubic-bezier(0.3, 0.9, 0.2, 1);
  --d-1: 0.24s;
  --d-2: 0.48s;
  --d-3: 0.9s;
  --d-4: 1.4s;

  /* ---------------------------------------------------------------- 图层 */
  --z-hero: 10;
  --z-nav: 60;
  --z-cursor: 80;
  --z-transition: 90;
  --z-preloader: 100;

  /* 由 JS 实时写入的运行时变量（视差 / 滚动进度） */
  --ptr-x: 0;
  --ptr-y: 0;
  --hero-progress: 0;
  --scroll-y: 0;
}

@media (max-width: 768px) {
  :root {
    --nav-h: 62px;
    --lh-body: 1.72;
  }
}