/* ============================================================================
 * tokens.css — 设计令牌层
 * 项目：洛阳智昊工程科技有限公司 官网 V4
 * ----------------------------------------------------------------------------
 * 职责：仅声明变量与 @layer 顺序，不产生任何视觉规则。其它样式表一律消费本文件，
 *       不得在别处硬编码颜色、字号、间距、斜切角度。
 *
 * 层叠策略（无构建工具下的显式优先级控制）：
 *   tokens < base < layout < components < pages
 * 后加载的样式表不会因书写顺序意外覆盖前者，优先级完全由层决定，
 * 需要提权时使用 !important 的场景应为零。
 *
 * 色板来源：继承 V3 构建产物中最终生效的 :root 令牌，不做主观换色。
 *   V3 实测值 --yellow:#ffd400 / --blue:#006ee6 / --electric:#0988ff
 *            --ink:#05111b / --paper:#f2f2ed
 *   品牌标记色取自 V3 favicon.svg：#0C79D8 / #2E9EFF / #68C4FF
 * ==========================================================================*/

@layer tokens, base, layout, components, pages;

/* ----------------------------------------------------------------------------
 * 1. 品牌色板
 * --------------------------------------------------------------------------*/
:root {
  /* 主色：工程蓝。brand-500 为交互基准色，深浅档位供状态与层次使用 */
  --brand-50:  #eaf4ff;
  --brand-100: #cfe6ff;
  --brand-200: #9fcbff;
  --brand-300: #68c4ff; /* 品牌标记浅蓝 */
  --brand-400: #2e9eff; /* 品牌标记主蓝 */
  --brand-500: #006ee6; /* V3 生效主蓝 —— 链接、按钮、焦点 */
  --brand-600: #0c79d8; /* 品牌标记深蓝 */
  --brand-700: #085ba8;
  --brand-800: #063f75;
  --brand-900: #052b52;

  /* 强调色：安全黄。工业场景的高可见度信号色，仅用于关键动作与数据 */
  --accent-100: #fff4cc;
  --accent-300: #ffe273;
  --accent-500: #ffd400; /* V3 生效黄 */
  --accent-600: #e6be00; /* 悬停加深 */
  --accent-700: #b89600; /* 需要落在浅底上的文字 */

  /* 电光蓝：数据流、物联网、动效高亮专用，不参与正文 */
  --electric: #0988ff;

  /* 中性色阶：ink 系为深色文本与深色区块，steel 系为金属灰层次 */
  --ink-900: #05111b; /* V3 生效近黑 —— 深色区块底色 */
  --ink-800: #0b1c29;
  --ink-700: #16293a;
  --ink-600: #26323d; /* V3 steel */
  --ink-500: #3d4b58;
  --slate-400: #6c7883; /* V3 muted —— 次要文字 */
  --slate-300: #94a1ad;
  --slate-200: #c3ccd4;
  --slate-100: #dde4e9;
  --line:      #d9e0e6; /* V3 line —— 分隔线基准 */

  /* 面色 */
  --paper:   #f2f2ed; /* V3 生效页底：微暖灰，避免纯白刺眼 */
  --paper-2: #f7f9fa;
  --surface: #ffffff;
  --surface-2: #fbfcfd;

  /* 语义色 */
  --ok:      #0f9d58;
  --warn:    #d97706;
  --danger:  #c62828;

  /* --------------------------------------------------------------------------
   * 区块语义色：按内容主题分配色彩，各区块消费对应令牌
   * --section-tech:    技术/科技类区块（选型器、技术优势）→ 科技蓝
   * --section-engine:  工程/项目类区块（案例、流程）→ 工程黄
   * --section-data:    数据展示类区块（数据带）→ 深色
   * --section-people:  人文类区块（新闻、招贤纳士）→ 暖灰
   * --section-convert: 转化类区块（联系、CTA）→ 强调黄
   * ------------------------------------------------------------------------*/
  --section-tech-bg:    var(--brand-50);
  --section-tech-accent: var(--brand-500);
  --section-tech-text:  var(--brand-800);

  --section-engine-bg:    #fffbe6;
  --section-engine-accent: var(--accent-500);
  --section-engine-text:  var(--accent-700);

  --section-data-bg:    var(--ink-900);
  --section-data-accent: var(--accent-500);
  --section-data-text:  #fff;

  --section-people-bg:    var(--surface);
  --section-people-accent: var(--brand-500);
  --section-people-text:  var(--text-1);

  --section-convert-bg:    var(--accent-500);
  --section-convert-accent: var(--ink-900);
  --section-convert-text:  var(--ink-900);

  /* 导航栏色彩令牌：支持透明→实色滚动过渡 */
  --nav-bg:          rgba(255, 255, 255, .0);
  --nav-bg-scrolled: rgba(255, 255, 255, .96);
  --nav-text:        #fff;
  --nav-text-scrolled: var(--text-1);
  --nav-border:      transparent;
  --nav-border-scrolled: var(--line);

  /* 文本色语义映射 */
  --text-1: var(--ink-900);
  --text-2: var(--ink-600);
  --text-3: var(--slate-400);
  --text-invert: #ffffff;
  --text-invert-dim: rgba(255, 255, 255, .68);

  /* 链接与焦点 */
  --link: var(--brand-500);
  --focus-ring: 0 0 0 3px rgba(9, 136, 255, .38);
}

/* ----------------------------------------------------------------------------
 * 2. 排版令牌
 * ----------------------------------------------------------------------------
 * 不引入外部字体文件：官网需在弱网与内网环境下可完整渲染，且中文字体子集
 * 体积过大。采用系统字体栈 + 字重/字距/压缩字形建立工业感的显示层级。
 * --------------------------------------------------------------------------*/
:root {
  /* 正文栈：优先无衬线，中文回落到系统黑体族 */
  --font-body: "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC",
               "Hiragino Sans GB", "Source Han Sans SC", sans-serif;

  /* 显示栈：用于大标题、数字、英文标语。窄体（Narrow/Condensed）制造
     重工行业的硬朗感，与 V3 的 Arial Narrow 取向保持一致 */
  --font-display: "Arial Narrow", "Helvetica Neue Condensed",
                  "Roboto Condensed", "Microsoft YaHei", Impact, sans-serif;

  /* 等宽栈：用于坐标、编号、规格参数等技术性文本 */
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas,
               "Liberation Mono", monospace;

  /* 字号阶梯：1.25 强（major third）为基准，桌面端由 clamp 平滑放大 */
  --fs-xs:   0.75rem;   /* 12  角标、标签 */
  --fs-sm:   0.8125rem; /* 13  辅助说明 */
  --fs-base: 0.9375rem; /* 15  正文（V3 移动端实测 15px，保持） */
  --fs-md:   1.0625rem; /* 17  lead 段落 */
  --fs-lg:   1.25rem;   /* 20  小标题 */
  --fs-xl:   clamp(1.5rem, 1.15rem + 1.4vw, 2rem);     /* 24→32 */
  --fs-2xl:  clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);   /* 28→40 */
  --fs-3xl:  clamp(2.125rem, 1.3rem + 3.4vw, 3.25rem); /* 34→52 */
  --fs-4xl:  clamp(2.5rem, 1.2rem + 5.2vw, 4.75rem);   /* 40→76 Hero */

  /* 行高与字距 */
  --lh-tight:  1.12;
  --lh-snug:   1.35;
  --lh-normal: 1.75; /* V3 body 实测值 */
  --lh-loose:  1.9;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-wide:  0.08em;
  --ls-caps:  0.18em; /* 英文小标签全大写时的字距 */
}

/* ----------------------------------------------------------------------------
 * 3. 间距与尺寸令牌
 * ----------------------------------------------------------------------------
 * 4px 基准的线性阶梯 + 语义化别名，避免魔法数。
 * --------------------------------------------------------------------------*/
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* 区块垂直留白：桌面松、移动端紧 */
  --section-y: clamp(var(--sp-16), 6vw + var(--sp-8), var(--sp-32));
  --section-y-sm: clamp(var(--sp-10), 3vw + var(--sp-4), var(--sp-16));

  /* 容器：继承 V3 的 1440px 上限与 96px 侧向留白，移动端降为 24px */
  --shell: min(1440px, calc(100% - 96px));
  --shell-narrow: min(1080px, calc(100% - 96px));
  --gutter: 48px;

  /* 导航与锚点偏移：V3 实测 scroll-padding-top:88px，此处与之对齐 */
  --nav-h: 76px;
  --topbar-h: 38px;
  --scroll-offset: calc(var(--nav-h) + var(--sp-4));

  /* 栅格间隙 */
  --gap-grid: clamp(var(--sp-4), 1.4vw + var(--sp-2), var(--sp-6));
}

/* ----------------------------------------------------------------------------
 * 4. 形状令牌 —— 工业斜切语言
 * ----------------------------------------------------------------------------
 * 三家竞品（世邦 / 洛阳大华 / 瑞隆）共有的视觉母题是「切角 / 斜边」，
 * 用以传达钣金、机加工的行业质感。此处把斜切量收敛为单一令牌，
 * 全站切角由 --notch 控制，改一个值即可整体调整锐度。
 * --------------------------------------------------------------------------*/
:root {
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* 切角尺寸：卡片右上角被"切掉"的直角边长 */
  --notch: 14px;
  --notch-sm: 8px;
  --notch-lg: 22px;

  /* 斜切多边形：右上角切角（用于卡片、图片容器） */
  --clip-notch: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
  /* 对角双切（用于强调块、按钮） */
  --clip-bevel: polygon(
    var(--notch-sm) 0,
    100% 0,
    100% calc(100% - var(--notch-sm)),
    calc(100% - var(--notch-sm)) 100%,
    0 100%,
    0 var(--notch-sm)
  );
}

/* ----------------------------------------------------------------------------
 * 5. 阴影与深度
 * ----------------------------------------------------------------------------
 * 深色区块用描边分层，浅色区块用极软投影；不使用彩色大阴影，
 * 以免在暖灰页底上显脏。
 * --------------------------------------------------------------------------*/
:root {
  --shadow-1: 0 1px 2px rgba(5, 17, 27, .06);
  --shadow-2: 0 6px 18px -8px rgba(5, 17, 27, .18);
  --shadow-3: 0 22px 48px -22px rgba(5, 17, 27, .32);
  --shadow-brand: 0 14px 34px -16px rgba(0, 110, 230, .45);

  --edge-light: 1px solid var(--line);
  --edge-dark: 1px solid rgba(255, 255, 255, .1);
}

/* ----------------------------------------------------------------------------
 * 6. 动效令牌
 * ----------------------------------------------------------------------------
 * 时长与缓动统一在此定义。所有入场动画走「transform + opacity」，
 * 避免触发布局重排。
 * --------------------------------------------------------------------------*/
:root {
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --dur-reveal: 720ms;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* V3 遗留的两条贝塞尔，保留以维持手感一致 */
  --ease-v3-in: cubic-bezier(.7, 0, .84, 0);
  --ease-v3-out: cubic-bezier(.23, 1, .32, 1);

  --stagger-step: 70ms; /* 列表逐项入场的间隔 */
}

/* ----------------------------------------------------------------------------
 * 7. 响应式断点（文档约定，供各层注释引用）
 * ----------------------------------------------------------------------------
 *   s   ≤  480px   手机竖屏
 *   m   ≤  768px   大屏手机 / 竖屏平板
 *   l   ≤ 1024px   平板横屏 / 小笔记本
 *   xl  ≥ 1440px   宽屏（容器封顶，仅增大留白）
 * 采用移动优先：默认样式服务 s/m，min-width 逐级增强。
 * --------------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------
 * 8. 可访问性：尊重系统的减少动效偏好
 * ----------------------------------------------------------------------------
 * 放在令牌层末尾，使任何消费 --dur-* 的规则一并失效，无需逐处处理。
 * --------------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --stagger-step: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

/* ----------------------------------------------------------------------------
 * 9. 高对比度强制模式：以描边替代阴影，保证信息不丢失
 * --------------------------------------------------------------------------*/
@media (forced-colors: active) {
  :root {
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
    --shadow-brand: none;
  }
}