/* ==========================================================================
   太研智能 · 基础层 base.css
   职责：CSS 重置 → 设计令牌 → 排版体系 → 通用工具类
   说明：全站唯一配色/尺寸来源，页面样式只允许引用变量，禁止硬编码色值。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 重置
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  /* 全面屏（刘海 / 挖孔）：锚点跳转的顶部偏移必须叠加状态栏安全区，
     否则跳转后标题会被状态栏与挖孔遮住。
     不支持 env() 的环境该行在解析阶段被丢弃，自动沿用上一行 */
  scroll-padding-top: calc(104px + env(safe-area-inset-top, 0px));
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

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

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(46, 125, 255, 0.4);
  color: var(--text-1);
}

/* --------------------------------------------------------------------------
   2. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  /* --- 品牌色：电光蓝 / 青 / 紫，三色构成全站辉光渐变 --- */
  --c-blue: #2E7DFF;
  --c-blue-deep: #1A56C4;
  --c-blue-soft: #6BA4FF;
  --c-cyan: #22D3EE;
  --c-violet: #7C5CFF;

  /* --- 背景层级：由深到浅，形成"深空"纵深 --- */
  --bg-void: #060B18;
  --bg-deep: #0A1428;
  --bg-panel: #0F1E38;
  --bg-raise: #132B4C;

  /* --- 玻璃拟态 --- */
  --glass-bg: rgba(18, 36, 66, 0.52);
  --glass-bg-strong: rgba(22, 44, 80, 0.74);
  --glass-border: rgba(122, 168, 240, 0.16);
  --glass-border-hi: rgba(122, 190, 255, 0.42);
  --glass-blur: 18px;

  /* --- 文本层级 --- */
  --text-1: #F5F8FF;
  --text-2: #A9B8D0;
  --text-3: #6B7D99;

  /* --- 功能色 --- */
  --c-success: #22C55E;
  --c-warn: #F59E0B;
  --c-danger: #EF4444;

  /* --- 线条 / 分隔 --- */
  --line-1: rgba(122, 168, 240, 0.14);
  --line-2: rgba(122, 168, 240, 0.26);
  --grid-line: rgba(110, 155, 225, 0.05);

  /* --- 渐变 --- */
  --grad-primary: linear-gradient(120deg, var(--c-blue) 0%, var(--c-cyan) 100%);
  --grad-tri: linear-gradient(120deg, var(--c-blue) 0%, var(--c-cyan) 52%, var(--c-violet) 100%);
  --grad-text: linear-gradient(100deg, #FFFFFF 0%, #BBD6FF 40%, var(--c-cyan) 100%);
  --grad-sheen: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.22) 50%,
      rgba(255, 255, 255, 0) 70%);

  /* --- 辉光 --- */
  --glow-sm: 0 0 18px rgba(46, 125, 255, 0.28);
  --glow-md: 0 0 38px rgba(46, 125, 255, 0.30);
  --glow-cyan: 0 0 34px rgba(34, 211, 238, 0.26);
  --glow-violet: 0 0 34px rgba(124, 92, 255, 0.24);

  /* --- 阴影（暗色下用于制造悬浮层级） --- */
  --shadow-sm: 0 2px 10px rgba(2, 6, 18, 0.5);
  --shadow-md: 0 14px 34px rgba(2, 6, 18, 0.55);
  --shadow-lg: 0 28px 70px rgba(2, 6, 18, 0.66);
  --shadow-card: 0 20px 48px -22px rgba(2, 8, 24, 0.9);

  /* --- 字体 --- */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC",
    "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
    Menlo, Consolas, "Liberation Mono", monospace;

  /* --- 排版阶梯（流式缩放，三端自适应核心） --- */
  --fs-display: clamp(2.15rem, 5.4vw, 4.15rem);
  --fs-h1: clamp(1.95rem, 4.4vw, 3.25rem);
  --fs-h2: clamp(1.65rem, 3.3vw, 2.5rem);
  --fs-h3: clamp(1.22rem, 1.9vw, 1.55rem);
  --fs-h4: clamp(1.05rem, 1.35vw, 1.2rem);
  --fs-lead: clamp(1rem, 1.35vw, 1.175rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.16;
  --lh-snug: 1.32;
  --lh-normal: 1.62;
  --lh-loose: 1.85;

  --ls-label: 0.16em;
  --ls-tight: -0.02em;

  /* --- 间距阶梯 --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6rem;
  --sp-12: 7.5rem;

  /* --- 圆角 --- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  /* --- 布局 --- */
  --container: 1280px;
  --container-wide: 1480px;
  --gutter: clamp(1.15rem, 3.6vw, 2.5rem);
  --sec-y: clamp(4.25rem, 8.5vw, 7.5rem);
  --nav-h: 74px;

  /* --- 动效 --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.7s;

  --z-bg: 0;
  --z-content: 1;
  --z-nav: 90;
  --z-drawer: 100;
  --z-top: 110;
}

/* --------------------------------------------------------------------------
   3. 排版体系
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-2);
  background: var(--bg-void);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); }

p {
  text-wrap: pretty;
}

strong {
  color: var(--text-1);
  font-weight: 600;
}

/* 正文段落：统一宽度与行高，保证长文可读性 */
.u-prose p {
  line-height: var(--lh-loose);
  margin-bottom: var(--sp-4);
}

.u-prose p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. 工具类
   -------------------------------------------------------------------------- */

/* 布局容器 */
.u-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* 全面屏横屏时左右两侧存在安全区（圆角 + 挖孔 + 手势条），
     容器内边距需要叠加，避免正文被切掉。
     物理属性写在逻辑属性之后，仅在不支持 env() 时才沿用上面的 padding-inline */
  padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
}

.u-container--wide {
  max-width: var(--container-wide);
}

/* 区块节奏 */
.u-section {
  position: relative;
  padding-block: var(--sec-y);
}

.u-section--tight {
  padding-block: clamp(3rem, 6vw, 5rem);
}

/* 视觉隐藏但保留无障碍语义 */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 焦点跳转锚点 */
.u-skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: var(--z-top);
  padding: 0.7rem 1.2rem;
  border-radius: var(--r-sm);
  background: var(--c-blue);
  color: #fff;
  font-size: var(--fs-sm);
  transition: top var(--dur) var(--ease-out);
}

.u-skip:focus {
  top: var(--sp-4);
}

/* 文本截断 */
.u-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文本层级 */
.u-t1 { color: var(--text-1); }
.u-t2 { color: var(--text-2); }
.u-t3 { color: var(--text-3); }
.u-center { text-align: center; }
.u-mono { font-family: var(--font-mono); }

/* 渐变文字（用于强调关键词） */
.u-grad {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 通用堆叠间距 */
.u-stack > * + * { margin-top: var(--sp-4); }
.u-stack-lg > * + * { margin-top: var(--sp-6); }

/* 装饰性元素统一不响应指针 */
.u-deco {
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   5. 降级：用户偏好减少动效
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

/* --------------------------------------------------------------------------
   6. 降级：不支持背景模糊的环境
   -------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-bg: rgba(16, 32, 60, 0.94);
    --glass-bg-strong: rgba(18, 38, 70, 0.98);
  }
}