:root {
  --color-primary: #1463ff;
  --color-primary-hover: #0f54db;
  --color-primary-dark: #0b2f6b;
  --color-primary-light: #eaf2ff;
  --color-accent: #35b8ff;
  --color-accent-soft: #dff7ff;
  --color-bg: #ffffff;
  --color-bg-soft: #f5f8fc;
  --color-bg-dark: #071b38;
  --color-bg-deep: #041127;
  --color-text: #18243a;
  --color-text-secondary: #637087;
  --color-text-muted: #66758c;
  --color-border: #dfe7f2;
  --color-border-dark: rgb(255 255 255 / 14%);
  --color-success: #16a779;
  --color-error: #c83f49;
  --color-white: #ffffff;

  --font-family:
    "PingFang SC",
    "Microsoft YaHei",
    "Noto Sans SC",
    Arial,
    sans-serif;

  --container-width: 1200px;
  --header-height: 76px;
  --section-space: clamp(84px, 8vw, 128px);

  --radius-small: 10px;
  --radius-medium: 16px;
  --radius-large: 20px;
  --radius-pill: 999px;

  --shadow-small: 0 8px 24px rgb(8 41 91 / 6%);
  --shadow-card: 0 18px 48px rgb(8 41 91 / 9%);
  --shadow-dark: 0 24px 70px rgb(0 9 29 / 28%);

  --transition-fast: 200ms ease;
  --transition-base: 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
  --transition-slow: 560ms cubic-bezier(0.2, 0.75, 0.25, 1);
}