:root {
  --themed-svg-hci-diagram-color-canvas: #e8e4d9;
  --themed-svg-hci-diagram-color-surface-primary: #ffffff;
  --themed-svg-hci-diagram-color-surface-secondary: #d9d4c6;
  --themed-svg-hci-diagram-color-surface-accent: #d9eee9;
  --themed-svg-hci-diagram-color-surface-success: #d9eee9;
  --themed-svg-hci-diagram-color-surface-warning: #fff0d7;
  --themed-svg-hci-diagram-color-surface-danger: #f7dfdc;
  --themed-svg-hci-diagram-color-text-primary: #0e1218;
  --themed-svg-hci-diagram-color-text-muted: #4b5563;
  --themed-svg-hci-diagram-color-border-primary: #52606d;
  --themed-svg-hci-diagram-color-edge: #0f7a73;
  --themed-svg-hci-diagram-color-edge-label: #0e1218;
  --themed-svg-hci-diagram-color-accent-primary: #0f7a73;
}

html.dark-theme {
  --themed-svg-hci-diagram-color-canvas: #0e1218;
  --themed-svg-hci-diagram-color-surface-primary: #1a2330;
  --themed-svg-hci-diagram-color-surface-secondary: #161c26;
  --themed-svg-hci-diagram-color-surface-accent: #173934;
  --themed-svg-hci-diagram-color-surface-success: #173934;
  --themed-svg-hci-diagram-color-surface-warning: #49351c;
  --themed-svg-hci-diagram-color-surface-danger: #4c2527;
  --themed-svg-hci-diagram-color-text-primary: #e8e4d9;
  --themed-svg-hci-diagram-color-text-muted: #b6bdc8;
  --themed-svg-hci-diagram-color-border-primary: #8f9baa;
  --themed-svg-hci-diagram-color-edge: #4fb3a6;
  --themed-svg-hci-diagram-color-edge-label: #e8e4d9;
  --themed-svg-hci-diagram-color-accent-primary: #e8a54b;
}

themed-svg[data-themed-svg-upgrade] {
  display: block;
  max-width: 100%;
}