body.dc-ds-v4 {
  --dc-ui-canvas: #f5f7f4;
  --dc-ui-surface: #ffffff;
  --dc-ui-surface-soft: #edf5f2;
  --dc-ui-ink: #12252d;
  --dc-ui-text: #2d4148;
  --dc-ui-muted: #5d6d73;
  --dc-ui-border: #d6e1dd;
  --dc-ui-control-border: #748b85;
  --dc-ui-primary: #0f746c;
  --dc-ui-primary-hover: #095b55;
  --dc-ui-primary-soft: #dff1ed;
  --dc-ui-warning: #9a4d19;
  --dc-ui-warning-soft: #fbefe5;
  --dc-ui-footer: #102832;
  --dc-ui-footer-text: #b7c6ca;
  --dc-ui-footer-link: #e5edeb;
  --dc-ui-focus: #0b6f68;
  --dc-ui-focus-dark: #8fe8dc;
  --dc-ui-shell: 1280px;
  --dc-ui-wide: 1180px;
  --dc-ui-reading: 760px;
  --dc-ui-faq: 880px;
  --dc-ui-gutter: 24px;
  --dc-ui-radius-control: 8px;
  --dc-ui-radius-small: 12px;
  --dc-ui-radius-card: 16px;
  --dc-ui-radius-shell: 24px;
  --dc-ui-shadow-card: 0 1px 2px rgb(19 35 43 / .06);
  --dc-ui-shadow-elevated: 0 16px 40px rgb(19 35 43 / .10);
  --dc-ui-space-1: 4px;
  --dc-ui-space-2: 8px;
  --dc-ui-space-3: 12px;
  --dc-ui-space-4: 16px;
  --dc-ui-space-5: 24px;
  --dc-ui-space-6: 32px;
  --dc-ui-space-7: 48px;
  --dc-ui-space-8: 64px;
  --dc-ui-space-9: 80px;
  --dc-ui-space-10: 96px;
}

@media (max-width: 768px) {
  body.dc-ds-v4 { --dc-ui-gutter: 16px; }
}