:root {
  --navy: #182f50;
  --navy-deep: #13233d;
  --blue: #006eff;
  --blue-hover: #005bd4;
  --ice: #eaf3ff;
  --ice-light: #f4f7fb;
  --surface: #f4f7fb;
  --surface-line: #dce5ef;
  --white: #fff;
  --ink: #1d2b3a;
  --muted: #586a7d;
  --line: #e0e8f0;
  --teal: #20a6af;
  --danger: #d64545;
  --font: "Noto Sans SC", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --content: 1240px;
  --gutter: 32px;
  --section-space: 76px;
  --gap: 24px;
  --radius: 4px;
  --radius-control: 3px;
  --header-height: 76px;
}

@media (max-width: 1024px) {
  :root {
    --gutter: 28px;
    --section-space: 52px;
    --gap: 18px;
    --header-height: 68px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --section-space: 42px;
    --gap: 16px;
    --header-height: 62px;
  }
}