:root {
  --color-brand: #1963fe;
  --color-brand-strong: #0f52dd;
  --color-cyan: #00b0f0;
  --color-navy: #07111f;
  --color-navy-soft: #0d1b2d;
  --color-ink: #212934;
  --color-slate: #4b5460;
  --color-muted: #7e8c9e;
  --color-surface: #ebf0f6;
  --color-surface-soft: #f5f8fc;
  --color-line: #dce3ec;
  --color-white: #ffffff;
  --color-footer-line: #3d4753;
  --font-display: "DIN Alternate", "Arial Narrow", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", Tahoma, Arial, sans-serif;
  --font-data: "DIN Alternate", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 14px 38px rgba(33, 41, 52, 0.08);
  --shadow-dark: 0 24px 70px rgba(0, 8, 20, 0.28);
  --shell: min(84vw, 1440px);
  --header-height: 76px;
  --section-space: clamp(52px, 4vw, 64px);
  --transition-fast: 180ms ease;
  --transition-base: 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 1500px) {
  :root {
    --shell: min(88vw, 1320px);
  }
}

@media (max-width: 767px) {
  :root {
    --shell: calc(100vw - 40px);
    --header-height: 64px;
    --section-space: 76px;
  }
}