:root {
  /* color — 取自 UI 稿（深靛蓝顶栏 + 纸本色底 + 琥珀强调） */
  --navy: #283656;
  --navy-deep: #1b2440;
  --navy-soft: #3c4e85;
  --paper: #f6f0e8;
  --paper-2: #fbf8f2;
  --paper-3: #f1e9dc;
  --surface: #ffffff;
  --ink: #14171f;
  --ink-2: #4b5160;
  --ink-3: #7c8291;
  --amber: #f2c163;
  --amber-strong: #e8ae43;
  --amber-soft: #fbe6bd;
  --line: rgba(40, 54, 86, 0.12);
  --line-strong: rgba(40, 54, 86, 0.22);
  --on-navy: #f3ede3;
  --on-navy-dim: #b9c1d4;

  /* type */
  --font-sans: 'PingFang SC','Microsoft YaHei','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-serif: 'Songti SC',SimSun,'Noto Serif SC',Georgia,serif;
  --font-mono: "SFMono-Regular", "JetBrains Mono", "Roboto Mono", ui-monospace, monospace;
  --fs-h1: clamp(32px, 3.05vw, 44px);
  --fs-h2: 21px;
  --fs-h3: 16px;
  --fs-body: 14.5px;
  --fs-small: 12.5px;
  --fs-micro: 11.5px;

  /* shape */
  --r-card: 12px;
  --r-image: 10px;
  --r-pill: 999px;
  --shadow-card: 0 4px 14px rgba(40, 54, 86, 0.07);
  --shadow-lift: 0 12px 30px rgba(40, 54, 86, 0.14);

  /* layout */
  --wrap: 1200px;
  --gutter: 32px;
  --sec-y: 20px;
  --head-gap: 14px;

  /* section height budget (1440 design width, from UI mockup) */
  --h-header: 66px;
  --h-hero: 340px;
  --h-topics: 240px;
  --h-table: 300px;
  --h-picks: 242px;
  --h-latest: 262px;
  --h-check: 220px;
  --h-platform: 200px;
  --h-faq: 186px;
  --h-footer: 144px;
}

@media (max-width: 1100px) {
  :root {
    --gutter: 26px;
    --fs-h2: 21px;
    --fs-h1: clamp(30px, 4.4vw, 40px);
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 18px;
    --sec-y: 20px;
    --fs-h2: 20px;
    --fs-body: 14px;
    --h-header: 60px;
  }
}