/* Generated from cloudsail-ui-system.css. Run node dev-scripts/Sync-UiTokens.mjs. */
:root {
  --cs-ui-font: "Microsoft YaHei UI", "Segoe UI", sans-serif;

  --cs-canvas: #f2f5fb;
  --cs-surface: #ffffff;
  --cs-surface-subtle: #e8edf6;
  --cs-surface-hover: #f7f9ff;
  --cs-surface-selected: #e7eaf9;

  --cs-ink: #28344b;
  --cs-ink-secondary: #596a85;
  --cs-ink-tertiary: #7a88a0;
  --cs-border: #dce3f0;
  --cs-border-strong: #bdc9df;

  --cs-brand: #5368c8;
  --cs-brand-hover: #4356af;
  --cs-brand-soft: #c3cdf1;
  --cs-brand-fog: #eef1fc;
  --cs-focus: rgba(83, 104, 200, 0.34);

  --cs-success: #2d8c67;
  --cs-success-soft: #edf8f3;
  --cs-warning: #a56a17;
  --cs-warning-soft: #fff7e8;
  --cs-danger: #c44f64;
  --cs-danger-soft: #fff1f4;

  --cs-overlay-surface: rgba(41, 51, 67, 0.94);
  --cs-overlay-surface-hover: rgba(255, 255, 255, 0.08);
  --cs-overlay-ink: #ffffff;
  --cs-overlay-muted: rgba(255, 255, 255, 0.64);
  --cs-overlay-border: rgba(255, 255, 255, 0.16);

  --cs-accent-sky: #4e68be;
  --cs-accent-sky-soft: #edf2fc;
  --cs-accent-mint: #337f83;
  --cs-accent-mint-soft: #e9f4f4;
  --cs-accent-lilac: #7862ae;
  --cs-accent-lilac-soft: #f1ecfa;
  --cs-accent-amber: #7862ae;
  --cs-accent-amber-soft: #f1ecfa;
  --cs-glass-shell: rgba(246, 248, 254, .86);
  --cs-glass-panel: rgba(255, 255, 255, .68);
  --cs-glass-edge: rgba(255, 255, 255, .92);
  --cs-glass-highlight: linear-gradient(125deg, rgba(255,255,255,.65), transparent 54%, rgba(202,192,239,.18));

  --cs-font-weight-regular: 400;
  --cs-font-weight-medium: 500;
  --cs-font-weight-semibold: 600;
  --cs-font-weight-bold: 700;

  --cs-type-key-size: 9px;
  --cs-type-key-line: 12px;
  --cs-type-micro-size: 10px;
  --cs-type-micro-line: 14px;
  --cs-type-meta-size: 11px;
  --cs-type-meta-line: 16px;
  --cs-type-body-size: 12px;
  --cs-type-body-line: 18px;
  --cs-type-nav-size: 12px;
  --cs-type-nav-line: 18px;
  --cs-type-section-size: 13px;
  --cs-type-section-line: 18px;
  --cs-type-brand-size: 15px;
  --cs-type-brand-line: 22px;
  --cs-type-page-size: 17px;
  --cs-type-page-line: 24px;

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

  --cs-titlebar-height: 56px;
  --cs-nav-height: 38px;
  --cs-control-height: 30px;
  --cs-key-height: 27px;
  --cs-page-inline: 20px;
  --cs-page-block: 14px;
  --cs-shortcut-stage-height: 226px;
  --cs-mapping-height: 48px;
  --cs-footer-height: 30px;

  --cs-radius-label: 4px;
  --cs-radius-control: 6px;
  --cs-radius-row: 8px;
  --cs-radius-panel: 8px;
  --cs-radius-shell: 12px;
  --cs-radius-sm: 6px;
  --cs-radius-md: 8px;

  --cs-shadow-control: 0 1px 2px rgba(35, 29, 49, 0.06);
  --cs-shadow-panel: 0 3px 12px rgba(45, 35, 67, 0.065);
  --cs-shadow-shell: 0 18px 46px rgba(39, 30, 58, 0.13);
  --cs-shadow-resting: 0 3px 12px rgba(45, 35, 67, 0.065);
  --cs-shadow-window: 0 18px 46px rgba(39, 30, 58, 0.13);
}