/* ============================================================================
   山东睿晟 Sunrise Plastics — 设计令牌 (Design Tokens)
   ============================================================================
   设计方向：工业精密 (BMW 式骨架) × 企业信息秩序 (IBM Carbon 式)
   核心原则：
     1. 近直角 — 工业几何感，圆角仅 2-4px
     2. 层次靠明暗段落交替，不靠阴影
     3. 单一强调色（日出橙）仅用于交互与信号，不做大面积填充
     4. 字重极端对比 — 300 大写字显示标题 × 600/700 导航
     5. 8px 栅格严格执行
   ============================================================================ */

:root {
  /* ── 品牌色：墨蓝黑 ───────────────────────────────────────────── */
  --ink-900: #061321;   /* 最深，页脚 / 深色 hero 底色 */
  --ink-800: #0A1A2F;   /* 深色段主背景 */
  --ink-700: #102542;   /* 深色卡片 / hover 面板 */
  --ink-600: #17324F;   /* 深色边框 / 分隔线 */
  --ink-500: #1F4265;   /* 深色段次级元素 */

  /* ── 品牌色：日出橙（唯一信号色） ─────────────────────────────── */
  --sun-500: #E8751A;   /* 主信号色 — CTA / 强调 / 激活 */
  --sun-600: #CF640F;   /* hover */
  --sun-700: #A94F0B;   /* active / pressed */
  --sun-300: #F59E4C;   /* 浅调，深色底上的文字 */
  --sun-050: #FDF3E9;   /* 极浅底，浅色段高亮背景 */

  /* ── 中性色阶（浅色段） ───────────────────────────────────────── */
  --gray-000: #FFFFFF;
  --gray-050: #F5F7FA;  /* 次级面背景（对齐中国制造网浅灰分区，替代阴影造层次） */
  --gray-100: #F1F3F6;  /* 卡片填充 / 交替行 */
  --gray-200: #E4E7EC;  /* 边框 / 分隔线 */
  --gray-300: #CBD2DA;  /* 强边框 */
  --gray-400: #98A2B3;  /* 弱化文字 / 占位符 */
  --gray-500: #667085;  /* 次级文字 */
  --gray-600: #475467;  /* 正文 */
  --gray-700: #344054;  /* 标题 */
  --gray-900: #222222;  /* 最深文字（对齐中国制造网正文深色） */

  /* ── 语义色（仅状态用，不做装饰） ─────────────────────────────── */
  --success-500: #12B76A;
  --success-050: #ECFDF3;
  --warning-500: #F79009;
  --danger-500:  #F04438;

  /* ── 分类标识色 ──────────────────────────────────────────────────
     原先这里是 5 个硬编码的 --cat-* 变量。分类色现已由后台 categories
     表统一维护，并导出到 assets/css/cat-tokens.css（该文件同时包含
     .tag--* 规则）。新增/修改分类只需在后台改一处，无需再动本文件。 */

  /* ── 语义化别名：面（Surface） ────────────────────────────────── */
  --bg-page:        var(--gray-000);
  --bg-subtle:      var(--gray-050);
  --bg-muted:       var(--gray-100);
  --bg-dark:        var(--ink-800);
  --bg-darkest:     var(--ink-900);
  --bg-inverse:     var(--gray-000);

  /* ── 语义化别名：文字（Text） ─────────────────────────────────── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-tertiary:  var(--gray-400);
  --text-body:      var(--gray-600);
  --text-on-dark:        #FFFFFF;
  --text-on-dark-muted:  rgba(255, 255, 255, 0.62);
  --text-on-dark-faint:  rgba(255, 255, 255, 0.38);

  /* ── 语义化别名：边框 ─────────────────────────────────────────── */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-dark:    var(--ink-600);
  --border-signal:  var(--sun-500);

  /* ── 字体族 ───────────────────────────────────────────────────── */
  /* 不自托管 webfont：靠字重与字距建立识别度，避免多套字体文件与国内加载问题 */
  --font-sans:
    "Inter", "HarmonyOS Sans SC", "HarmonyOS Sans", -apple-system,
    BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;

  /* ── 字号刻度（fluid，1rem = 16px） ───────────────────────────── */
  --fs-display:  clamp(2.5rem, 6.5vw, 5rem);     /* 80px  hero 巨型标题 */
  --fs-h1:       clamp(2rem, 4.5vw, 3.25rem);    /* 52px  段落主标题 */
  --fs-h2:       clamp(1.625rem, 3.2vw, 2.25rem);/* 36px  区块标题 */
  --fs-h3:       clamp(1.25rem, 2vw, 1.5rem);    /* 24px  卡片标题大 */
  --fs-h4:       1.125rem;                        /* 18px  卡片标题 */
  --fs-lg:       1.0625rem;                       /* 17px  导语 */
  --fs-body:     1rem;                            /* 16px  正文 */
  --fs-sm:       0.9375rem;                       /* 15px  次级正文 */
  --fs-xs:       0.8125rem;                       /* 13px  元信息 */
  --fs-eyebrow:  0.75rem;                         /* 12px  小标签（全大写） */

  /* ── 行高 ─────────────────────────────────────────────────────── */
  --lh-display: 1.08;   /* 巨型标题 — 紧凑 */
  --lh-heading: 1.2;    /* 标题 — 紧凑 */
  --lh-snug:    1.45;
  --lh-body:    1.65;   /* 正文 — 舒适 */
  --lh-relaxed: 1.75;

  /* ── 字距 ─────────────────────────────────────────────────────── */
  --ls-display: -0.03em;  /* 大字号收紧 */
  --ls-heading: -0.02em;
  --ls-normal:  0;
  --ls-label:   0.08em;   /* 导航 / 按钮 全大写 */
  --ls-eyebrow: 0.14em;   /* eyebrow 小标签 */

  /* ── 字重 ─────────────────────────────────────────────────────── */
  --fw-light:     300;  /* 显示标题 — 轻字重的权威感 */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;  /* 导航 / 按钮 */
  --fw-bold:      700;

  /* ── 间距（8px 栅格） ─────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 80px;
  --sp-11: 96px;
  --sp-12: 128px;

  /* 段落垂直节奏 */
  --section-y: clamp(40px, 5.5vw, 56px);

  /* ── 圆角（工业近直角） ───────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   3px;   /* 按钮 / 输入框 — 主用 */
  --radius-md:   4px;   /* 卡片 — 主用 */
  --radius-lg:   6px;   /* 大卡片 / 图片容器 */
  --radius-pill: 100px; /* 仅标签胶囊 */

  /* ── 层级（几乎不用阴影，靠明暗交替造纵深） ───────────────────── */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm:   0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:   0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg:   0 12px 32px rgba(16, 24, 40, 0.10);

  /* 焦点环（可访问性） */
  --focus-ring: 0 0 0 2px var(--gray-000), 0 0 0 4px var(--sun-500);

  /* ── 布局 ─────────────────────────────────────────────────────── */
  --max-width:      1240px;
  --max-width-text: 720px;
  --nav-height:     68px;
  --gutter:         clamp(20px, 4vw, 40px);

  /* ── 动效 ─────────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --transition: var(--dur-base) var(--ease-out);

  /* ── 深色段内的局部令牌覆写（供 .dark-section 使用） ─────────── */
  --on-dark-border: rgba(255, 255, 255, 0.12);
  --on-dark-surface: rgba(255, 255, 255, 0.04);
  --on-dark-surface-hover: rgba(255, 255, 255, 0.08);
}

/* ── 深色主题：仅覆盖语义化别名 ──────────────────────────────────
   基础色板（gray、ink、sun 各阶）与字体/栅格等结构令牌不变；
   组件规则一律引用别名而自动适配。hero / 页脚本就是深色底
   （--ink-800/900），深色模式下改用更深的近黑色区分层次。 */
[data-theme="dark"] {
  --bg-page:        #0d1117;
  --bg-subtle:      #131a22;
  --bg-muted:       #1a222c;
  --bg-dark:        #070a0f;
  --bg-darkest:     #04060a;
  --bg-inverse:     #0d1117;
  --text-primary:   #e6edf3;
  --text-secondary: #9198a1;
  --text-tertiary:  #6e7681;
  --text-body:      #b1bac4;
  --border-subtle:  #21262d;
  --border-default: #30363d;
  --border-dark:    #161b22;
  --on-dark-border: rgba(255, 255, 255, 0.14);
  --on-dark-surface: rgba(255, 255, 255, 0.06);
  --on-dark-surface-hover: rgba(255, 255, 255, 0.10);

  /* 高亮浅底：浅色段是近白暖底（#FDF3E9），深色段换成半透明品牌橙。
     组件一律写 background: var(--sun-050)，故只改这一处即可全站适配 ——
     否则近白底会在深色模式下变成一块刺眼的白斑（悬停/图标底/引用块）。 */
  --sun-050: rgba(232, 117, 26, 0.14);
}

/* ============================================================================
   全局重置与基础排版
   ============================================================================ */

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

/* hidden 属性兜底：作者样式表中的 display 会覆盖 UA 样式的 [hidden]{display:none}，
   同优先级下作者样式胜出，故必须显式声明，否则 <div class="hero__pager" hidden> 等会失效 */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--bg-page);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

p { margin: 0; }

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

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

button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

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

/* 键盘可访问性：仅键盘焦点显示焦点环 */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

::selection {
  background: var(--sun-500);
  color: #fff;
}

/* ── 滚动条（细，工业感） ───────────────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

/* ── 尊重用户的减少动效偏好 ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   通用排版工具类
   ============================================================================ */

/* eyebrow — 全大写小标签，国际化感的关键细节 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sun-600);
  line-height: 1;
}

.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--sun-500);
  flex-shrink: 0;
}

/* 深色背景上的 eyebrow */
.dark-section .eyebrow,
.eyebrow--on-dark {
  color: var(--sun-300);
}

.eyebrow--on-dark::before { background: var(--sun-300); }

/* 段落主标题区块 */
.section-head {
  margin-bottom: var(--sp-8);
}

.section-head--center {
  text-align: center;
}

.section-head--center .eyebrow::before { display: none; }

.section-head__title {
  /* 22–28px：低于产品详情页产品名（24–30px），维持「页面主题 > 区块标题」层级 */
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
  margin-top: var(--sp-4);
  color: var(--text-primary);
}

.section-head__desc {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--max-width-text);
}

.section-head--center .section-head__desc {
  margin-left: auto;
  margin-right: auto;
}

/* 显示级巨型标题（轻字重 + 全大写 = BMW 式权威感） */
.display-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

/* 深色段 */
.dark-section {
  background: var(--bg-dark);
  color: var(--text-on-dark-muted);
}

.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4 {
  color: var(--text-on-dark);
}