/* ============================================================
   优创社官网 · 设计令牌 Design Tokens
   风格：深空科技 · 物联网节点网 · 克制高级
   品牌绿取自 logo 实测采样：#ACCE22
   ============================================================ */

:root {
  /* ---------- 色彩：深空底 + 单一品牌绿 ---------- */
  /* 背景由深到浅三级，构成纵深而非渐变 */
  --c-void:    #06080C;   /* 最深：页面底 */
  --c-surface: #0A0C10;   /* 次深：首屏底 */
  --c-raise:   #101319;   /* 抬升：区块底 */
  --c-line:    #1A1F27;   /* 分隔线 */

  /* 品牌绿：全场唯一强调色。用得极省。 */
  --c-brand:      #ACCE22;
  --c-brand-hi:   #C4E24A;
  --c-brand-dim:  #7E9918;
  --c-brand-glow: rgba(172, 206, 34, .12);

  /* 文本：四级，对比度均达 WCAG AA */
  --c-text:   #F2F5F7;   /* 主文本 · 对 --c-surface 约 16.8:1 */
  --c-text-2: #A8B0BA;   /* 次级 · 约 7.6:1 */
  --c-text-3: #6B7480;   /* 弱化 · 约 4.0:1（仅用于装饰性文字） */
  --c-text-inv:#06080C;  /* 品牌色上的文字 */

  /* 网络节点的语义色：全部低饱和，彼此可区分但不喧哗 */
  --c-node-hub:  #F2F5F7;              /* 中心平台：纯白，最高亮度 */
  --c-node-a:    #ACCE22;              /* 资源类 A · 品牌绿 */
  --c-node-b:    #6E9BB5;              /* 资源类 B · 钢青 */
  --c-node-c:    #9B8FB5;              /* 资源类 C · 淡紫灰 */
  --c-node-d:    #B5A06B;              /* 资源类 D · 暖砂 */
  --c-edge:      rgba(168, 176, 186, .28);  /* 最近邻连线 */
  --c-edge-hot:  rgba(172, 206, 34, .85);    /* 脉冲光点 */

  /* ---------- 字体：系统栈，零网络请求 ---------- */
  /* 中文优先苹方/思源黑，正文保持系统原生渲染速度 */
  --f-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
           "HarmonyOS Sans SC", "Source Han Sans SC",
           "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas,
           "Noto Sans Mono", monospace;

  /* 字阶：8px 基线，clamp 做流体缩放 */
  /* ★ --t-display 只在这里定义一次（本次修正）
     原来 index.html 的内联 <style> 里也定义了一份 clamp(28px,3.3vw,46px)，
     但 tokens.css 是后加载的<link>，同优先级下后者胜出 →
     实际生效的是下面这份 40px，内联那份形同虚设。
     两处同名定义不同值，是最难查的一类问题（因为「看起来写了却没生效」）。
     现在统一到 tokens.css，index.html 内联那份同步改成一致值。 */
  --t-display: clamp(26px, 2.6vw, 36px);   /* 主张：与 logo/按钮重新配平 */
  --t-h2:      clamp(22px, 2.2vw, 30px);   /* 区块标题 */
  --t-body:    16px;
  --t-sm:      14px;
  --t-xs:      12px;

  /* ---------- 间距：8px 基线 ---------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-6: 48px;
  --s-8: 64px;
  --s-12: 96px;

  /* 首屏留白：内容贴边的最小安全距离 */
  --gutter: clamp(20px, 4vw, 56px);

  /* ---------- 形状与动效 ---------- */
  --r-sm: 2px;      /* 克制：几乎不用圆角 */
  --r-pill: 999px;  /* 仅 CTA */

  /* 动效时长：统一两档，避免花哨 */
  --d-fast: 160ms;
  --d-base: 280ms;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ---------- 层级 ----------
     z-bg   : logo 图形水印（试验性，垫在最底）
     z-net  : 节点网 canvas
     z-ui   : 导航 / 文案 / CTA
     三层必须严格递增，否则背景会盖住内容或被内容盖住。 */
  --z-bg:  0;
  --z-net: 1;
  --z-ui:  2;
  --z-nav: 3;
}

/* 尊重系统减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}