body.light, body.dark, body.light-hc, body.dark-hc {
  --canvas-foreground: var(--color-foreground);
  --canvas-foreground-emp: var(--color-foreground-emp);
  --canvas-foreground-de-emp: var(--color-foreground-de-emp);
  --canvas-foreground-inverse: var(--color-foreground-inverse);
  --canvas-background: var(--color-background);
  --canvas-background-secondary: var(--color-background-secondary);
  --canvas-background-raised: var(--color-background-raised);
  --canvas-background-overlay: var(--color-background-selected);
  --canvas-background-hover: var(--color-background-hover);
  --canvas-background-inverse: var(--color-background-inverse);
  --canvas-border: var(--color-border);
  --canvas-border-de-emp: var(--color-border-de-emp);
  --canvas-border-hover: var(--color-border-hover);
  --canvas-border-subtle: var(--color-border-subtle);
  --canvas-border-grid: var(--color-border-grid);
  --canvas-primary: var(--color-primary);
  --canvas-primary-hover: var(--color-primary-hover);
  --canvas-primary-alpha-20: var(--color-primary-alpha-20);
  --canvas-secondary-pressed: var(--color-secondary-pressed);
  --canvas-secondary-focused: var(--color-secondary-focused);
  --canvas-selection-indicator: var(--color-selection-indicator);
  --canvas-error: var(--color-error);
  --canvas-error-icon: var(--color-error-icon);
  --canvas-error-text: var(--color-error-text);
  --canvas-error-background: var(--color-error-background);
  --canvas-warning-icon: var(--color-warning-icon);
  --canvas-warning-text: var(--color-warning-text);
  --canvas-warning-background: var(--color-warning-background);
  --canvas-success-icon: var(--color-success-icon);
  --canvas-success-background: var(--color-success-background);
  --canvas-info-icon: var(--color-info-icon);
  --canvas-info-text: var(--color-info-text);
  --canvas-icon-default: var(--color-icon-default);
  --canvas-node-shadow-rest: 0 2px 8px #0000002e;
  --canvas-node-shadow-hover: 0 4px 16px #0000005c;
  --canvas-node-shadow-lifted: 0 16px 48px #000000b8, 0 4px 16px #0006;
}

body.light, body.light-hc {
  --canvas-node-shadow-lifted: 0 8px 24px #0000001f, 0 2px 8px #0000000f;
}

.future-light, .future-dark, .wireframe, .vertex, .canvas {
  --canvas-foreground: var(--foreground);
  --canvas-foreground-emp: var(--foreground-secondary);
  --canvas-foreground-de-emp: var(--foreground-muted);
  --canvas-foreground-inverse: var(--foreground-inverse);
  --canvas-background: var(--surface);
  --canvas-background-secondary: var(--background);
  --canvas-background-raised: var(--surface-raised);
  --canvas-background-overlay: var(--surface-overlay);
  --canvas-background-hover: var(--surface-hover);
  --canvas-background-inverse: var(--surface-inverse);
  --canvas-border: var(--ap-wind-border);
  --canvas-border-de-emp: var(--border-subtle);
  --canvas-border-hover: var(--border-hover);
  --canvas-border-subtle: var(--border-subtle);
  --canvas-border-grid: var(--border-muted);
  --canvas-primary: var(--primary);
  --canvas-primary-hover: var(--foreground-accent-muted);
  --canvas-primary-alpha-20: var(--brand-subtle);
  --canvas-secondary-pressed: var(--surface-overlay);
  --canvas-secondary-focused: var(--accent);
  --canvas-selection-indicator: var(--primary);
  --canvas-error: var(--destructive);
  --canvas-error-icon: var(--destructive);
  --canvas-error-text: var(--destructive);
  --canvas-error-background: var(--error-background, var(--surface-raised));
  --canvas-warning-icon: var(--warning, var(--color-amber-500));
  --canvas-warning-text: var(--warning, var(--color-amber-500));
  --canvas-warning-background: var(--warning-background, var(--surface-raised));
  --canvas-success-icon: var(--success, var(--color-emerald-500));
  --canvas-success-background: var(--success-background, var(--surface-raised));
  --canvas-info-icon: var(--info, var(--color-sky-500));
  --canvas-info-text: var(--info, var(--color-sky-500));
  --canvas-icon-default: var(--foreground-muted);
  --canvas-node-shadow-rest: 0 2px 8px #0000002e;
  --canvas-node-shadow-hover: 0 4px 16px #0000005c;
  --canvas-node-shadow-lifted: 0 16px 48px #000000b8, 0 4px 16px #0006;
}

.future-light, .wireframe {
  --canvas-node-shadow-lifted: 0 8px 24px #0000001f, 0 2px 8px #0000000f;
}

