/* ============================================================
   Magsite 设计系统 — 全局 token（CSS 变量）
   工业 · 可信 · 克制。改色只改这里，不要在组件里硬编码。
   ============================================================ */

:root {
  /* —— 品牌色：酒红 + 金铜（取自 Tinho Logo）—— */
  --ms-primary:        #7E1F2B; /* 主色：品牌酒红 */
  --ms-primary-600:    #9A2C3A; /* hover/亮 */
  --ms-primary-700:    #5C1520; /* 深 */
  --ms-primary-050:    #F7EBED; /* 浅酒红块底 */

  --ms-accent:         #C5841E; /* 金铜：高亮/数据/次级 CTA/分隔 */
  --ms-accent-600:     #A86C12;
  --ms-accent-050:     #FBF3E3; /* 浅金块底 */

  /* —— 中性 / 文本 —— */
  --ms-ink:    #1C1416; /* 标题近黑（暖调） */
  --ms-body:   #463B3E; /* 正文 */
  --ms-muted:  #756A6D; /* 次要文本 */
  --ms-line:   #E7E1E2; /* 边框/分隔 */
  --ms-steel:  #9A8E90; /* 金属灰点缀 */

  /* —— 背景 —— */
  --ms-bg:      #FFFFFF;
  --ms-bg-alt:  #FAF6F2; /* 交替区块底（暖白） */
  --ms-bg-dark: #231216; /* 深色区块（footer/数据条，深酒红黑） */

  /* —— 字体 —— */
  --ms-font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ms-font-mono: "JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace; /* 参数表/规格/数据用 */

  /* —— 字号（流体 clamp，移动端自动收窄）—— */
  --ms-text-xs:   0.75rem;
  --ms-text-sm:   0.875rem;
  --ms-text-base: 1rem;
  --ms-text-lg:   1.125rem;
  --ms-text-xl:   1.375rem;
  --ms-text-2xl:  clamp(1.5rem, 1.1rem + 1.2vw, 1.75rem);
  --ms-text-3xl:  clamp(1.8rem, 1.3rem + 1.8vw, 2.4rem);
  --ms-text-4xl:  clamp(2.2rem, 1.5rem + 2.6vw, 3.1rem);
  --ms-text-5xl:  clamp(2.6rem, 1.6rem + 3.6vw, 4.2rem);
  --ms-text-display: clamp(2.8rem, 1.8rem + 4.2vw, 4.8rem); /* Hero 专用 */

  --ms-leading-tight: 1.08;
  --ms-leading-body:  1.7;
  --ms-tracking-tight: -0.025em;
  --ms-tracking-wide:  0.14em; /* mono eyebrow/标签 */

  /* —— 间距（4px 基准）—— */
  --ms-space-1:  0.25rem;
  --ms-space-2:  0.5rem;
  --ms-space-3:  0.75rem;
  --ms-space-4:  1rem;
  --ms-space-5:  1.25rem;
  --ms-space-6:  1.5rem;
  --ms-space-8:  2rem;
  --ms-space-12: 3rem;
  --ms-space-16: 4rem;
  --ms-space-24: 6rem;

  /* —— 布局 —— */
  --ms-container:      1200px;
  --ms-container-wide: 1320px;
  /* 紧凑节奏（Aarke 式）：区块短、信息一目了然，留白靠水平呼吸而非纵向堆叠 */
  --ms-section-y:      clamp(3rem, 6vw, 5rem);

  /* 产品图在白框内的最大占比（越小留白越多）。想统一调留白改这一处。 */
  --ms-img-scale: 78%;

  /* —— 圆角 / 阴影 —— */
  --ms-radius-sm: 6px;
  --ms-radius-md: 10px;
  --ms-radius-lg: 16px;
  --ms-shadow-sm: 0 1px 2px rgba(16,32,46,.06), 0 1px 3px rgba(16,32,46,.08);
  --ms-shadow-md: 0 4px 12px rgba(16,32,46,.08), 0 2px 4px rgba(16,32,46,.06);
  --ms-shadow-lg: 0 12px 32px rgba(16,32,46,.12);

  /* —— 动效（克制：< 600ms，流体缓出）—— */
  --ms-ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ms-duration:    .45s;
  --ms-duration-sm: .25s;
}

/* 全局基调：字体渲染 + 选中色 + 焦点可达性 */
body.magsite {
  font-family: var(--ms-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.magsite ::selection { background: var(--ms-primary); color: #fff; }
body.magsite :focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; }

/* 暗色区块作用域（footer / 数据条）可加 .ms-dark 反转文本色 */
.ms-dark {
  --ms-ink:  #FFFFFF;
  --ms-body: #C7D2DD;
  --ms-muted:#8A97A6;
  --ms-line: rgba(255,255,255,.12);
  background: var(--ms-bg-dark);
  color: var(--ms-body);
}