:root {
  --wh-red: #B81C22;
  --wh-red-dark: #8E1519;
  --wh-blue: #015293;
  --wh-blue-hover: #013D6E;
  --wh-text: #2B2B2B;
  --wh-text-muted: #5C5C5C;
  --wh-border: #D8D8D8;
  --wh-bg: #F7F6F2;
  --wh-surface: #FFFFFF;
  --wh-success: #2E7D52;
  --wh-success-bg: #E8F3EC;
  --wh-warning: #8A5A00;
  --wh-warning-bg: #FFF6E6;
  --wh-error: #9B2335;
  --wh-error-bg: #FCE8EB;

  --wh-font-body: 18px;
  --wh-font-body-lh: 1.6;
  --wh-font-h1: 32px;
  --wh-font-h2: 26px;
  --wh-font-h3: 22px;
  --wh-font-btn: 18px;
  --wh-font-small: 15px;

  --wh-space-1: 4px;
  --wh-space-2: 8px;
  --wh-space-3: 12px;
  --wh-space-4: 16px;
  --wh-space-5: 24px;
  --wh-space-6: 32px;
  --wh-space-7: 48px;

  --wh-radius: 4px;
  --wh-radius-lg: 8px;
  --wh-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  --wh-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

  --wh-duration-fast: 280ms;
  --wh-duration-normal: 450ms;
  --wh-duration-slow: 700ms;
  --wh-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  --wh-max-width: 1200px;
  --wh-header-h: 56px;
  --wh-toolbar-h: 44px;
  --wh-touch-min: 48px;
}

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

html {
  font-size: var(--wh-font-body);
  line-height: var(--wh-font-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: var(--wh-text);
  background: var(--wh-bg);
  min-height: 100vh;
}

a {
  color: var(--wh-blue);
  text-decoration: none;
  transition: color var(--wh-duration-fast) var(--wh-ease);
}

a:hover {
  color: var(--wh-blue-hover);
}

button {
  font-family: inherit;
  font-size: var(--wh-font-btn);
  cursor: pointer;
  border: none;
  background: none;
}

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}