:root {
  /* Approved Career Blue foundation */
  --color-canvas: #dfe7eb;
  --color-paper: #f5f8fa;
  --color-paper-light: #fbfdfe;
  --color-mist: #e9f0f4;
  --color-powder: #cbdde6;
  --color-ink: #182a35;
  --color-text-muted: #637985;
  --color-text-secondary: #425963;
  --color-hairline: rgba(48, 82, 101, .17);
  --color-accent: #547f95;
  --color-accent-deep: #294f63;
  --color-type-01: #285f68;
  --color-disabled: rgba(99, 121, 133, .42);
  --color-feedback-error: #8a4f55;
  --color-option-index: #8295a0;
  --color-option-hover: rgba(255, 255, 255, .36);
  --color-selected-index: rgba(251, 253, 254, .68);
  --color-chart-fill: rgba(84, 127, 149, .17);
  --color-state-track: rgba(41, 79, 99, .19);
  --color-visual-field: #cfdee5;
  --color-visual-disc: #6f99aa;
  --color-visual-rail: #edf4f7;
  --color-visual-arc: #2f6571;
  --color-visual-wedge: #8eb0bf;
  --color-visual-block: #173b4c;

  /* Approved typography families and scale */
  --font-serif: "Songti SC", "STSong", "SimSun", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --type-display-size: clamp(38px, 10vw, 46px);
  --type-section-number-size: 50px;
  --type-section-title-size: 27px;
  --type-body-size: 15px;
  --type-support-size: 13px;
  --type-caption-size: 10px;
  --type-data-label-size: 17px;
  --type-data-value-size: 10px;

  /* Approved mobile layout and control dimensions */
  --content-width: 480px;
  --page-gutter: clamp(32px, 8vw, 38px);
  --section-space-start: 92px;
  --section-space-end: 104px;
  --button-height: 48px;
  --button-radius: 10px;
  --hairline-width: 1px;
}

@media (max-width: 390px) {
  :root {
    --page-gutter: 28px;
    --type-section-number-size: 45px;
    --type-section-title-size: 24px;
  }
}