:root {
  color-scheme: light;
  --wc-white: #ffffff;
  --wc-page: #f6f9ff;
  --wc-blue-soft: #eff5ff;
  --wc-blue-tint: #e3edff;
  --wc-cyan-soft: #eef8fb;
  --wc-heading: #030a1a;
  --wc-text: #26313b;
  --wc-muted: #6b7683;
  --wc-border: #dcdfe5;
  /* One brand blue drives the site, with a light and a deep step for gradients. */
  --wc-blue: #1a66ff;
  --wc-blue-hover: #0b49d9;
  --wc-blue-deep: #0b49d9;
  --wc-blue-light: #4287ff;
  --wc-good: #3f7050;
  --wc-good-soft: #f0f6f2;
  --wc-review: #7a6a4a;
  --wc-review-soft: #faf7f0;
  --wc-bad: #bf3730;
  --wc-bad-soft: #fdf2f1;
  --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);
}