@charset "UTF-8";
/* ============================================================================
   prism-tokens.css — 极维视觉 · Prism 设计契约 第 1 层
   职责：字体加载 / :root token（全站唯一定义处）/ reset / 排版基线 /
        .container / a·img·button 基础 / focus 环 / prefers-reduced-motion
   禁止：任何组件样式（.card / .section / .button / .rail / .grid …）、!important
   断点：仅 1200px / 900px / 600px（本层不需要断点）
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* ── 1. Token（契约第 2 节，唯一定义处）───────────────────────────────── */

:root{
  /* 色 */
  --graphite:#111820; --graphite-2:#19242e; --graphite-3:#243342;
  --ink:#19242e; --ink-2:#3d5160; --muted:#5b7181; --muted-2:#7d919f;
  --blue:#145c9e; --blue-bright:#1e7dc8; --blue-soft:#e3edf6;
  --ice:#f3f7fa; --paper:#fff; --line:#c7d1d8; --line-soft:#dde5ea;
  --yellow:#f2b544; --yellow-deep:#d99a24;
  --on-dark:#eaf2f8; --on-dark-muted:#b3c4d0;
  /* 字 */
  --display:'Barlow Condensed','Noto Sans SC',sans-serif;
  --body:'Noto Sans SC',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  /* v4：h1 与 h2 整体收一档。旧上限 74/48px 在 1440px 下过大，
     hero 大标题必须换行、section 标题压过正文层级。 */
  --fs-h1:clamp(34px,3.1vw,50px); --fs-h2:clamp(24px,2.1vw,32px);
  --fs-h3:clamp(19px,1.4vw,23px); --fs-body:15px; --fs-sm:13.5px; --fs-xs:11.5px;
  /* 间距（8 基准，禁止硬编码 gap） */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;
  --section-y:clamp(64px,6vw,104px);
  /* 版面 */
  --max:1600px; --gutter:clamp(20px,3.2vw,56px); --nav:78px;
  --cut:12px; /* 切角尺寸 */
  --ring:3px solid var(--yellow); /* focus */
  /* 阴影（契约 v2 增补：禁止各层硬编码 box-shadow 色值） */
  --shadow:0 2px 10px rgba(17,24,32,.07);
  --shadow-lg:0 12px 32px rgba(17,24,32,.14);
  --shadow-dark:0 12px 32px rgba(0,0,0,.34);
  /* 过渡（禁止各层自写数值） */
  --dur:.2s; --dur-slow:.45s;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* z-index 层级（唯一裁决处） */
  --z-reveal:1; --z-float:60; --z-header:100; --z-dropdown:110; --z-panel:118; --z-skip:120;
  /* 蓝图网格底纹参数（唯一定义处：各层禁止再硬编码网格色值/周期）
     v3：网格从“满屏平铺”收敛为“section 上缘渐隐带”，周期统一 64px，
     色值压到刚可辨识，避免多套周期叠加造成视觉噪音、压过正文。 */
  --grid-line:rgba(20,92,158,.055);
  --grid-line-dark:rgba(234,242,248,.05);
  --grid-size:64px;
  --grid-fade:clamp(180px,22vw,300px); /* 网格从 section 顶部渐隐的高度 */
  /* 深底面板（.card--dark / section--brand 内部件） */
  --dark-fill:rgba(255,255,255,.06);
  --dark-fill-2:rgba(255,255,255,.1);
  --dark-line:rgba(255,255,255,.18);
}

/* ── 2. reset ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after{ box-sizing:border-box }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

body{
  margin:0;
  background:var(--ice);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:1.72;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img,
svg,
video{ display:block; max-width:100%; height:auto }

a{
  color:inherit;
  text-decoration:none;
  touch-action:manipulation;
}

button,
input,
textarea,
select{ font:inherit; color:inherit }

button{ touch-action:manipulation }

ul,
ol{ margin:0; padding:0; list-style:none }

figure,
blockquote,
dl,
dd{ margin:0 }

table{ border-collapse:collapse; border-spacing:0 }

hr{ border:0; border-top:1px solid var(--line-soft); margin:0 }

/* ── 3. 排版基线 ──────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6{
  margin:0 0 var(--s4);
  font-family:var(--display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:.01em;
  text-wrap:balance;
  scroll-margin-top:calc(var(--nav) + 24px);
}

h1{ font-size:var(--fs-h1); font-weight:700; letter-spacing:.005em }
h2{ font-size:var(--fs-h2); font-weight:700 }
h3{ font-size:var(--fs-h3); font-weight:600; line-height:1.3 }
h4{ font-size:var(--fs-body); font-weight:600; line-height:1.4 }

p{
  margin:0 0 var(--s4);
  font-size:var(--fs-body);
}

p:last-child{ margin-bottom:0 }

small{ font-size:var(--fs-sm) }

code,
kbd,
pre,
samp{ font-family:var(--mono); font-size:var(--fs-sm) }

strong,
b{ font-weight:600 }

/* 锚点跳转不被固定导航遮挡 */
section[id],
article[id],
div[id]{ scroll-margin-top:calc(var(--nav) + 24px) }

/* ── 4. 版面容器 ──────────────────────────────────────────────────────── */

.container{
  width:min(100% - var(--gutter) * 2, var(--max));
  margin-inline:auto;
}

/* ── 5. focus 环 ──────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:var(--ring);
  outline-offset:3px;
}

/* ── 6. 跳转链接 .skip ────────────────────────────────────────────────── */
/* ── 7. [data-reveal] 渐入（仅 html.js 下生效）─────────────────────────── */

html.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),
             transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

html.js [data-reveal].seen{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* ── 8. 工具类 ────────────────────────────────────────────────────────── */

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── 9. 降低动态效果偏好 ──────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }

  *,
  *::before,
  *::after{
    animation-duration:.01ms;
    animation-delay:0s;
    animation-iteration-count:1;
    transition-duration:.01ms;
    transition-delay:0s;
    scroll-behavior:auto;
  }

  html.js [data-reveal],
  html.js [data-reveal].seen{
    opacity:1;
    transform:none;
    transition:none;
    will-change:auto;
  }
}

/* ── 8. [hidden] 兜底（组件 display 特异性高于浏览器默认，必须显式压制）──── */

[hidden] { display: none !important; }
