:root {
  color-scheme: light;
  --wc-white: #ffffff;
  --wc-page: #f7faff;
  --wc-blue-soft: #eff6ff;
  --wc-blue-tint: #e3efff;
  --wc-cyan-soft: #eff8fb;
  --wc-heading: #183b64;
  --wc-text: #2e4963;
  --wc-muted: #526b82;
  --wc-border: #d9e5f0;
  --wc-blue: #1765d1;
  --wc-blue-hover: #1155b6;
  --wc-good: #4b7057;
  --wc-good-soft: #f0f5f1;
  --wc-review: #7b6746;
  --wc-review-soft: #faf6ee;
  --wc-bad: #98625f;
  --wc-bad-soft: #faf3f2;
  --wc-cyan: #286e86;
  --wc-radius: 8px;
  /* Static controls and icon wrappers match the reference component dimensions. */
  --wc-control-radius: 6px;
  --wc-icon-radius: 11px;
  --wc-icon-entry-radius: 10px;
  --wc-tag-radius: 4px;
  --wc-highlight-radius: 3px;
  --wc-surface-radius: 12px;
  --wc-surface-border: #e2eaf4;
  --wc-surface-shadow: 0 1px 2px rgb(24 59 100 / 4%), 0 14px 32px -20px rgb(24 59 100 / 22%);
  --wc-divider: #edf2f8;
  --wc-row-hover: #f5f9ff;
  --wc-font: "Microsoft YaHei", sans-serif;
  --wc-font-figure: var(--wc-font);
}